Slider v.1

Реализуем простой в настройке, функциональный слайдер с навигацией и двумя эффектами перехода (затухание и перелистывание).

Подключение слайдера

Подключаем скрипт (если слайдер нужен на главной странице, то подключаем локально в шаблоне index.php)

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.slides.min.js"></script>

Запускаем скрипт и настройки слайдера
if($(«div»).is(«#slides»)) {} — условие срабатывания скрипта, только при наличие в шаблоне данного класса

// Слайдер на главной

if($("div").is("#slides")) {

$(function() {
      $('#slides').slidesjs({
		
		
        width: 1000,
        height: 350,
		auto: true,
		play: {
		  effect: "fade",
		  //active: true,
          auto: true,
          interval: 10000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 1000
        },
        navigation: {
          effect: "fade"
        },
        pagination: {
          effect: "fade"
        },
        effect: {
          fade: {
            speed: 800
          }
        },
		
	callback: {
		  
          loaded: function() {
			
		  setTimeout(function () {  $('.s-title p').show(), $('.s-title p').addClass('animated fadeIn');  }, 200);
			
          					 },
		  
          start: function() {
            
			$('.s-title p').hide(),
			$('.s-title p').addClass('animated fadeOut');
			
          					},
		  
          complete: function() {
			
            setTimeout(function () {  $('.s-title p').show(), $('.s-title p').removeClass('fadeOut'), $('.s-title p').addClass('animated fadeIn');  }, 200);
          					  
		  					   }
		  
        		  }
		
      });
	  
$(".slidesjs-next.slidesjs-navigation, .slidesjs-previous.slidesjs-navigation, .slidesjs-play.slidesjs-navigation, .slidesjs-stop.slidesjs-navigation").empty();	  
});

}

В callback назначаются jquery функции которые должны срабатывать при определенных событиях.

HTML верстка слайдера

Слайдер может быть настроен на последние записи и т.д., действует на основе запроса get_posts.

<div id="slides">

<?php
global $post;
$args = array( 'posts_per_page' => 5, 'offset'=> 0 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>

<div>
<?php if( has_post_thumbnail() ) : ?>

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0']; ?>

<div class="slide-div-pic" style="background-image: url(<?=$url?>);"></div>

<?php else : ?>

<div class="slide-div-pic" style="background-image: url(<?php bloginfo('template_url'); ?>/images/img-default-full.jpg);"></div>

<?php endif; ?>


<div class="s-title">

<!--<?php if( has_post_thumbnail() )
{the_post_thumbnail(square);}
else
{echo '<img src="'.get_bloginfo("template_url").'/images/img-default-square.jpg" />';}
?>-->
<br>

<a href="<?php the_permalink(); ?>"><p><?php the_title(); ?></p></a>

</div>


</div>


<?php endforeach; ?>

</div>

<?php wp_reset_postdata() ?>

CSS стили слайдера

/* Слайдер */

#index-slider {
    border: 1px solid #fff;
    overflow: hidden;
    float: left;
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    margin-top: 5px;
}
  
#slides {display:none;}
  
.slidesjs-container {
    width: 100% !important;
    height: 350px !important;
    background-color: rgb(255, 255, 255);
}  
  
.slidesjs-control {width: 100% !important;}  
  
.slide-div-pic {
  height: 350px;
  background-size: cover;
  background-position: center;	
}  
  
.slidesjs-previous.slidesjs-navigation {
    position: absolute;
    left: 15px;
	opacity: 0;
    top: 46%;
	z-index: 99;
	color: white;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
  
.slidesjs-previous.slidesjs-navigation:after {  
    font-family: FontAwesome;
    font-size: 40px;
    content: '\f053';
}  
 
.slidesjs-next.slidesjs-navigation {
    position: absolute;
    right: 15px;
	opacity: 0;
    top: 46%;
	z-index: 99;
	color: white;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
	
}  
  
.slidesjs-next.slidesjs-navigation:after {  
    font-family: FontAwesome;
    font-size: 40px;
    content: '\f054';
}  
			
.slidesjs-next.slidesjs-navigation:hover, .slidesjs-previous.slidesjs-navigation:hover {text-decoration: none;}   
     
#slides:hover > .slidesjs-previous.slidesjs-navigation {opacity: 1; left: 30px;}   
  
#slides:hover > .slidesjs-next.slidesjs-navigation {opacity: 1; right: 30px;}   
  
.slidesjs-pagination-item {display: inline-block; list-style: none;} 
    
.slidesjs-pagination {
    position: absolute;
    z-index: 99;
    padding: 0;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
  
.slidesjs-pagination-item a {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0);
    margin: 0 5px;
    display: block;
	text-indent: -9999px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	border: 2px solid #FFF;
}  
	    
.slidesjs-pagination-item a.active {background-color: rgba(255, 255, 255, 1);}	  
   
.slidesjs-play.slidesjs-navigation {text-decoration: none;}  

.slidesjs-play.slidesjs-navigation:after {	 
font-family: FontAwesome;
font-size: 20px;	
content: "\f04b";	  
}			  
  
.slidesjs-stop.slidesjs-navigation {text-decoration: none;}
 
.slidesjs-stop.slidesjs-navigation:after {	 
font-family: FontAwesome;
font-size: 20px;	
content: "\f04d";	  
}
  
.slidesjs-slide img {width: 100%;}   
  
.s-title {
position: absolute;
bottom: 0px;
height: 45px;
left: 0px;
right: 0px;
text-align: left;
background-color: rgba(0, 0, 0, 0.7);
}
  
.s-title img {width: 100%; height: auto; float: left;}	  
  
.s-title a p {
/* border-left: 2px solid yellow; */
z-index: 99;
padding-left: 30px;
box-sizing: border-box;
position: absolute;
display: none;
color: #fff;
font-size: 16px;
line-height: 48px;
bottom: 0px;
}