私はwordpressプロジェクトに取り組んでいます。最初の4つの投稿のサムネイルが上に表示され、最初の投稿の内容が下に表示されるように投稿の詳細を表示する以下の次の記事の詳細。私は以下の目的でカルーセルスライダーを使用しています
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 4000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
私のHTMLデザインは
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
$args = array('post_type' => 'testimonial', 'posts_per_page' => $posts_per_page,
'tax_query' => array(array('taxonomy' => 'testimonial_category', 'field' => 'name', 'terms' => $category,)));
query_posts( $args );
$i = 0;
//var_dump($args );
while ( have_posts() ) : the_post();
$item_class = ($i == 0) ? 'item active' : 'item'; //Set class active for image which is showing
?>
<div class="<?php echo $item_class; ?>">
<div class="col-md-3 onclick_image testimonial-image<?php echo $i; ?>"" num ="<?php echo $i; ?>" postid="<?php echo get_the_id(); ?>">
<?php
the_post_thumbnail();
the_title();
the_content();
$i++; ?>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
スライダーに画像を表示するためにこれを使いました。
<div class="col-md-12">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . 'img/download-1.jpg'; ?>"></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
スクリプト
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
cSS
.carousel-showmanymoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}