Лучший плагин слайдера Wordpress для HTML и изображений

Question

Лучший плагин слайдера Wordpress для HTML и изображений

Мне нужен простой в использовании слайдер для домашней страницы веб-сайта, с которым я поиграл с кучей плагинов, и ничто не соответствовало моим потребностям или с которым было легко справиться. Я бы предпочел не тратить время на создание своего собственного.

Вот требования, которые мне нужны

Позволяет использовать более одного слайдера с различными размерами изображения (размером с фоновое изображение)
Должен уметь обрабатывать html и изображения, чтобы его можно было связать с сообщения

В основном я хочу, чтобы слайдер отображал все сообщения, помеченные в определенной категории, как "избранные" , а затем отображал заголовок и изображение на главной странице.

Любые предложения. Я уже могу получить нужную мне информацию с помощью функции запроса.

Если я должен создать свой собственный, это формат, в котором я хотел бы, чтобы код был

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

Если ни один плагин не может создать несколько версий чего-то подобного , может ли кто-нибудь предоставить некоторый javascript для создания слайдера из это

Спасибо

1

jquery slideshow plugin-recommendation

Author: Rarst, 2011-09-07

Source

1 answers

score 1 · Accepted Answer

Вот что я сделал на случай, если кто-нибудь захочет скопировать это, заметил, что многие люди смотрят

Установите категорию по вашему выбору, и показанное изображение будет слайдом для этого заголовка, и все это будет иметь постоянную ссылку

Вот HTML/PHP для его создания

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array('cat'=> 3, 'posts_per_page' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class='featslide' id='feat-".$slidecount."'>";
                    echo " <a href='".get_permalink($post->ID)."'>";

                    echo '<span class="slide-title sosmed">&nbsp;&nbsp;'.the_title('','',false).'&nbsp;&nbsp;&nbsp;&nbsp;</span>';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                        <?php 
                            echo "<img src='".$image[0]."' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSS вам, вероятно, потребуется изменить это в соответствии с вашими размерами

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

Затем jQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: 'fade',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

На основе этого сообщения в блоге о создании html-слайда из jquery цикл http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle