0

	var slider = $(".slider"),
		slides = slider.find('li'),
		nav = slider.find('nav');

	slides.eq(0).addClass('current');

	nav.children('a').eq(0).addClass('current_dot');

function set (event) {
		
		$(this).addClass('current_dot').siblings().removeClass('current_dot');
		slides.eq($(this).index()).addClass('current').removeClass('prev').siblings().removeClass('current');
		slides.eq($(this).index()).prevAll().addClass('prev');
		slides.eq($(this).index()).nextAll().removeClass('prev');
		
	};
  setInterval(set, 2000);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html {
	font-size: calc(5px + 0.4vw);
}
body {
  font-family: 'Playfair Display', serif;
}
a {
	text-decoration: none;
}
.intro {
	position: relative;
	width: 100%;
	height: 100vh;
}
.left {
	float: left;
	height: 100%;
	width: 60%;
	padding: 3rem 3rem 3rem 5rem;
	display: table;
}
.left > div {
	display: table-cell;
	vertical-align: middle;
}
span {
  color: #E8CA2B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  display: inline-block;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-bottom: 4rem;
}
h1 {
	font-size: 8rem;
	margin-bottom: 3rem;
}
h1 + p {
  color: #949494;
  font-size: 1.6rem;
  margin-bottom: 4rem;
}
p + a {
  font-size: 1.6rem;
  color: #000;
}
.slider {
	float: right;
	position: relative;
	width: 100%;
	height: 100%;
}
.slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	transition: clip .7s ease-in-out, z-index 0s .7s;
	clip: rect(0, 100vw, 100vh, 100vw);
	display: table;
}
.center-y {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
}
h3 {
	font-size: 5rem;
	font-style: italic;
}
h3 + a {
	font-size: 1.6rem;
	display: inline-block;
	color: #fff;
	margin-top: 2rem;
}
h3, h3 + a {
	opacity: 0;
	transition: opacity .7s 0s, transform .5s .2s;
	transform: translate3d(0, 50%, 0);
}
li.current h3, li.current h3 + a {
	opacity: 1;
	transition-delay: 1s;
	transform: translate3d(0, 0, 0);
}
li.current {
	z-index: 1;
	clip: rect(0, 100vw, 100vh, 0);
}
li.prev {
	clip: rect(0, 0, 100vh, 0);
}
.slider nav {
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}
nav a {
	display: inline-block;
	border-radius: 50%;
	width: 1.2rem;
	height: 1.2rem;
  min-width: 12px;
  min-height: 12px;
	background: #fff;
	margin: 0 1rem;
  transition: transform .3s;
}
a.current_dot {
	transform: scale(1.4);
}
@media screen and (max-width: 700px) {
	.left {
		width: 100%;
		height: 30%;
	}
	.slider {
		width: 100%;
		height: 70%;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</title>
	<link rel="stylesheet" href="style2.css"/>
</head>
<body>
<section class="intro">


      <div class="slider">
        <ul>
        	<li style="background-image:url(https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?auto=format&fit=crop&w=3032&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Что такое IT-конференция?</h3>
              <a href="#">Перейти на сайт</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1454165205744-3b78555e5572?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>IT-конференция-новый взгляд на привычные вещи</h3>
              <a href="#">Перейти на сайт</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1484914440268-8d352fe4db95?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Мастер классы от выдающихся людей,у которых есть чему учиться</h3>
              <a href="#">View Project</a>	
            </div>
          </li>

          
<li style="background-image:url(https://images.unsplash.com/photo-1496902526517-c0f2cb8fdb6a?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Прямое взаимодействие с потенциальным работодателем</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
          
          <li style="background-image:url(https://images.unsplash.com/photo-1496469888073-80de7e952517?auto=format&fit=crop&w=2089&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>встреча выпускников</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1475483768296-6163e08872a1?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Приятный вечер с разговорами и гитарой</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
        </ul>

        <ul>
          <nav>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
          </nav>
        </ul>
      </div>
	</section>
	<script src="js/jquery.js"></script> 

</body>
</html>

Вопрос как и справить что бы прокрутила до последнего и остановилась?

4
  • у вас там какой-то GoogleMaps с ошибкой выпадает, оно тут к чему вообще?
    – teran
    27 окт 2017 в 10:50
  • 1
    в общем чтобы остановилось, надо при запуске интервалов сохранить хэндл, и когда в обработчике дойдете до последнего элемента, остановить выполнение интервальной функции. вообще по факту у меня они по кругу и не крутятся
    – teran
    27 окт 2017 в 10:52
  • @teran, а не подскажите по какой причине слайдер прокручивает с первой сразу на последнюю? 27 окт 2017 в 11:17
  • начните с того, что this в контексте функции это не текущий слайд, а window
    – teran
    27 окт 2017 в 12:01

1 ответ 1

1

видимо вы что-то такое сделать хотели?

повторю замечания из комментариев, что для остановки слайд-шоу запомните хэндл возвращаемый setInterval, и остановие его с помощью clearInterval().
А что касается самой функции, то у вас там используется $(this). Вероятно раньше функция висела на клике на сами li-слайдера. Конечно, в контексте интервальной функции $(this) уже не указывает на слайды, а кажет на объект window.

var slider = $(".slider");

var sdata = { 
     slides: slider.find('li'), 
     current: slider.find('li').eq(0),
     count: slider.find('li').length,
     siHandle : null,
     nav : slider.find('nav')
     
};


function set (event) {		
    if(!sdata.count--){
        clearTimeout(sdata.siHandle);
        return;
    }
    var c = sdata.current.next();
    
    c.addClass('current')
     .siblings()
        .removeClass('current');
    c.prevAll().addClass('prev')     ;
    c.nextAll().addClass('next');
    
    sdata.current = c;    
    sdata.nav.find('.current_dot')
       .removeClass('current_dot')
       .next()
         .addClass('current_dot')
       
};
  
sdata.siHandle = setInterval(set, 2000);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html {
	font-size: calc(5px + 0.4vw);
}
body {
  font-family: 'Playfair Display', serif;
}
a {
	text-decoration: none;
}
.intro {
	position: relative;
	width: 100%;
	height: 100vh;
}
.left {
	float: left;
	height: 100%;
	width: 60%;
	padding: 3rem 3rem 3rem 5rem;
	display: table;
}
.left > div {
	display: table-cell;
	vertical-align: middle;
}
span {
  color: #E8CA2B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  display: inline-block;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-bottom: 4rem;
}
h1 {
	font-size: 8rem;
	margin-bottom: 3rem;
}
h1 + p {
  color: #949494;
  font-size: 1.6rem;
  margin-bottom: 4rem;
}
p + a {
  font-size: 1.6rem;
  color: #000;
}
.slider {
	float: right;
	position: relative;
	width: 100%;
	height: 100%;
}
.slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	transition: clip .7s ease-in-out, z-index 0s .7s;
	clip: rect(0, 100vw, 100vh, 100vw);
	display: table;
}
.center-y {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
}
h3 {
	font-size: 5rem;
	font-style: italic;
}
h3 + a {
	font-size: 1.6rem;
	display: inline-block;
	color: #fff;
	margin-top: 2rem;
}
h3, h3 + a {
	opacity: 0;
	transition: opacity .7s 0s, transform .5s .2s;
	transform: translate3d(0, 50%, 0);
}
li.current h3, li.current h3 + a {
	opacity: 1;
	transition-delay: 1s;
	transform: translate3d(0, 0, 0);
}
li.current {
	z-index: 1;
	clip: rect(0, 100vw, 100vh, 0);
}
li.prev {
	clip: rect(0, 0, 100vh, 0);
}
.slider nav {
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}
nav a {
	display: inline-block;
	border-radius: 50%;
	width: 1.2rem;
	height: 1.2rem;
  min-width: 12px;
  min-height: 12px;
	background: #fff;
	margin: 0 1rem;
  transition: transform .3s;
}
a.current_dot {
	transform: scale(1.4);
}
@media screen and (max-width: 700px) {
	.left {
		width: 100%;
		height: 30%;
	}
	.slider {
		width: 100%;
		height: 70%;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</title>
	<link rel="stylesheet" href="style2.css"/>
</head>
<body>
<section class="intro">


      <div class="slider">
        <ul>
        	<li class="current" style="background-image:url(https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?auto=format&fit=crop&w=3032&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Что такое IT-конференция?</h3>
              <a href="#">Перейти на сайт</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1454165205744-3b78555e5572?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>IT-конференция-новый взгляд на привычные вещи</h3>
              <a href="#">Перейти на сайт</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1484914440268-8d352fe4db95?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Мастер классы от выдающихся людей,у которых есть чему учиться</h3>
              <a href="#">View Project</a>	
            </div>
          </li>

          
<li style="background-image:url(https://images.unsplash.com/photo-1496902526517-c0f2cb8fdb6a?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Прямое взаимодействие с потенциальным работодателем</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
          
          <li style="background-image:url(https://images.unsplash.com/photo-1496469888073-80de7e952517?auto=format&fit=crop&w=2089&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>встреча выпускников</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
          <li style="background-image:url(https://images.unsplash.com/photo-1475483768296-6163e08872a1?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)">
            <div class="center-y">
              <h3>Приятный вечер с разговорами и гитарой</h3>
              <a href="#">View Project</a>	
            </div>
          </li>
        </ul>

        <ul>
          <nav>
            <a href="#" class="current_dot"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
          </nav>
        </ul>
      </div>
	</section>


</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.