web-dev-qa-db-fra.com

Meilleur plugin Wordpress Slider pour HTML et images

Je veux un curseur simple à utiliser pour la page d'accueil du site Web avec lequel j'ai joué avec un tas de plugins et rien ne répondait vraiment à mes besoins ou était facile à gérer. Je préférerais ne pas perdre mon temps à construire le mien.

Voici les exigences dont j'ai besoin

  1. Permet à plusieurs curseurs avec différentes tailles d'image (dimensionnées à l'image d'arrière-plan)
  2. Doit être capable de gérer le HTML et les images afin qu'il puisse être lié à des publications

Fondamentalement, je veux que le curseur prenne toutes les publications marquées dans une certaine catégorie en disant "en vedette" puis affiche le titre et l'image en vedette sur la page d'accueil.

Aucune suggestion. Je peux déjà obtenir les informations dont j'ai besoin par le biais de la fonction de requête.

Si je dois construire le mien, c'est le format dans lequel je souhaite que le code soit au format

<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>

Si aucun plugin ne peut créer plusieurs versions de ce type, il peut fournir du javascript pour créer un curseur

Je vous remercie

plugin-recommendationjqueryslideshow
1
BillPull

Voici ce que j'ai fait au cas où quelqu'un voudrait le copier remarqua que beaucoup de gens cherchaient

définir une catégorie de votre choix et l'image sélectionnée sera la diapositive pour ce titre sera affiché et le tout est permalien

voici le HTML/PHP pour le générer

  <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, vous devrez probablement le modifier en fonction de vos tailles

  #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;
   }

Puis le jQuery

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

basé sur cet article de blog sur la réalisation d'une diapositive html à partir du cycle de jquery http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

1
BillPull