Автоматическая смена изображения?

Question

[ChrisMenschenin]

Здравствуйте.
Не смог найти код на сайте demos.themetrust.com/baylie/, отвечающий за автосмену изображений. Не могли бы вы поделиться подобными примерами, например, из JSfiddle или Codepen.
Спасибо

Answer 1

[Ilya]

это обычный слайдер, используй slick-slider какой нибудь или owl-carousel

Answer 2

[teen]

Конкретно в примере работает плагин: flexslider.woothemes.com
Разметка:

<div class="flexslider">
   <ul class="slides">
      <li id="slide1" class="post-43 slide type-slide status-publish hentry" style="background-image: url(http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_grass.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;">
         <div class="details">
            <div class="box">
               <div class="inside">
                  <div class="text">
                     <p><img src="http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic.png" alt="slide_1_graphic" width="351" height="331" class="alignnone size-full wp-image-44" srcset="http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic.png 351w, http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic-300x283.png 300w" sizes="(max-width: 351px) 100vw, 351px" /></p>
                     <a href="http://themetrust.com/baylie" target="_parent" style="background-color:#a06546;" class="button ">Buy This Theme</a>
                  </div>
               </div>
            </div>
         </div>
      </li>
      <li id="slide2" class="post-128 slide type-slide status-publish hentry" style="background-image: url(http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_mountains.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;">
         <div class="details">
            <div class="box">
               <div class="inside">
                  <div class="text">
                     <h1>A Full Screen Slideshow</h1>
                     <p>Make a bold statement with big images.</p>
                     <a href="http://themetrust.com/demos/baylie/portfolio/" target="_parent" style="background-color:#cc6f41;" class="button ">View Portfolio</a>
                  </div>
               </div>
            </div>
         </div>
      </li>
   </ul>
</div>

Вызов:

$('.flexslider').flexslider({
		slideshowSpeed: 6000,  
		directionNav: true,
		slideshow: 1,		// включаем автоматическую прокрутку		 				
		animation: 'fade',     // эффект перелистывания - fade
		animationLoop: true
	});