For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.
The mobile version uses the same images and order as our dekstop version, because
both versions use the same database query.
/*
* Carrousel
*/
$q = "
SELECT
c.id,
CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
FROM
product_carrousel c
WHERE
c.product_id = '" . $product_id . "'
ORDER BY
c.order ASC
";
$r["carrousel"] = $this->db->select($q);
What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.
HTML/PHP Mobile version:
<div class="swiper-container product-slider">
<div class="swiper-wrapper">
<?php foreach ($product['carrousel'] as $x => $item):?>
<div class="swiper-slide">
<figure class="swiper-slide-img">
<img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
</figure>
</div>
<?php endforeach; ?>
</div>
HTML Output Mobile:
<div class="swiper-container product-slider done">
<div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
</div>
Partial solution:
In idangerous.swiper.min.js i found the setting: initialSlide.
Changing that to -1 makes the slider start with the last slide in mobile.
I've added to ui.js the following:
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
},
Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.
On load:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
While dragging/swiping:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
</div>
After swipe:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
Solution
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
$(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
Related
I'm using the slick slider nav, but I want to hide the current slide in the nav slider.
Currently you can see the current slide image at the top, but you can also see that same image at the start of the nav slider. I want to hide this image though, so that the slider nav will only show the next images, not the current.
Any idea if this is possible?
Codepen for reference.
<div class="container">
<div class="row">
<div class="col">
<div class="main-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
<div class="nav-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
</div>
</div>
</div>
// Gallery - Synced sliders
$(".main-slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".nav-slider",
});
// Gallery - Nav slider
$(".nav-slider").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ".main-slider",
dots: false,
arrows: true,
focusOnSelect: true,
});
Slick adds the slick-current class to the current slide.
So just add this to your CSS style:
.nav-slider .slick-current {
display: none;
}
I am developing an app using angularjs and javascript. In my app a page contains 2 tabs: named 'aboutme' and 'portfolio'. Both contains ion-slides. slide is working only in 'aboutme' tab not in 'portfolio'. Here is my code:
<div class="tab-inner-disc">
<div class="block">
<div class="br-menu-main">
<div class="br-block {{clickOn}}">
<ul>
<li>
<button ng-class="{'conn1': clickOn == 'conn1'}" class="disc_tab" ng-click="showCon('conn1')">About me </button>
</li>
<li>
<button ng-class="{'conn2': clickOn == 'conn2'}" class="disc_tab " ng-click="showCon('conn2')"> Portfolio </button>
</li>
</ul>
</div>
</div>
<div ng-show="clickOn=='conn1'">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="img/add/2.png">
</ion-slide-page>
<ion-slide-page>
<img src="img/add/3.png">
</ion-slide-page>
<ion-slide-page>
<img src="img/add/6.png">
</ion-slide-page>
</ion-slides>
</div>
<div ng-show="clickOn=='conn2'">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="img/add/2.png">
</ion-slide-page>
<ion-slide-page>
<img src="img/add/3.png">
</ion-slide-page>
<ion-slide-page>
<img src="img/add/6.png">
</ion-slide-page>
</ion-slides>
</div>
</div>
</div>
*my controller*
$scope.showCon = function(con) {
$scope.clickOn = con;
}
$scope.showCon('conn1');
$scope.options = {
loop: false,
effect: 'slide',
speed: 500,
pagination:false,
}
my controller
$scope.showCon = function(con) {
$scope.clickOn = con;
}
$scope.clickOn = conn1; //add this code will be work
// $scope.showCon('conn1');
$scope.options = {
loop: false,
effect: 'slide',
speed: 500,
pagination:false,
}
I have Bootstrap Carousel as shown below
<div class="carousel slide multi-item-carousel" id="theCarousel3">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4">
<img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
</div>
<div class="item">
<div class="col-lg-4">
<img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
</div>
<div class="item">
<div class="col-lg-4">
<img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
</div>
It works fine as it is but when I add images with jQuery by appending same html blocks as shown below it doesn't work anymore:
$('#myContent').append("<div class='carousel slide multi-item-carousel' id='theCarousel3'><div class='carousel-inner'>");
for(var x = 0; x < imageCount; x++) {
var imgElement = "<div class='item'><div class='col-lg-4'><img src='"
+ pictures[x].path + "' id='img" + x +
"' class='img-responsive' width='250' height='300' /></div></div>";
$('#myContent').append(imgElement);
if(x == 0) $('#theCarousel3 .item').addClass('active');
}
$('#myContent').append("</div><a class='left carousel-control' href='#theCarousel3' data-slide='prev'></a><a class='right carousel-control' href='#theCarousel3' data-slide='next'></a></div>");
I have even added the active class for the first item which seem to me a possible issue but still not working, what I see is images added one by one but not sliding. What could be the issue here, any help please? Thanks.
you need to add you images to the same DOM element as you other images.
instead of $('#myContent').append(imgElement); it should be
$('#theCarousel3 .carousel-inner').eq(0).append(imageElement);
You may be able to get rid of the eq(0) part, but I'm not sure if that will work since class selector is multiple.
the other option is to add the myContent id to your carousel-inner element
you also arent creating valid html the way you are trying to create the carousel
try this:
$(function() {
var imgElement,
pictures = [
'https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png',
'https://lh3.googleusercontent.com/Rz-Ob1uRO2Xch40qHYgxpZitc3vZzxjeeSHVaNazn4dUny-AqGK0hLXUxhTpg4qgATP6VdlvZPYv_o0=s559-no',
'http://blog.suite-logique.fr/wp-content/uploads/2014/01/G7N0lnxM.jpeg',
'http://inspiratron.org/wp-content/uploads/2014/07/google-hummingbird.jpg'
]
wrapper = $('#myContent'),
carousel = $('<div/>', {
id: "theCarousel3",
"class": "carousel slide multi-item-carousel",
append: '<div class="carousel-inner"></div><a class="left carousel-control" href="#theCarousel3" data-slide="prev"></a><a class="right carousel-control" href="#theCarousel3" data-slide="next"></a>'
}),
carouselInner = carousel.find('.carousel-inner').eq(0);
wrapper.append(carousel);
carousel.carousel();
for (var i = 0; i < pictures.length; i++) {
imgElement = $('<div/>', {
"class": "item" + (i ? '' : ' active'),
append: $('<div/>', {
"class": 'col-lg-4',
append: $('<img/>', {
src: pictures[i],
id: 'img' + i,
"class": 'img-responsive',
height: 300
})
})
})
carouselInner.append(imgElement);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id='myContent'></div>
</div>
Note: Frist div have 'item' and 'active' class, and all other div have only 'item' class then it will work otherwise it will not work.
<div class="item active">
<div class="col-lg-4">
<img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
</div>
<div class="item">
<div class="col-lg-4">
<img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
</div>
<div class="item">
<div class="col-lg-4">
<img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
</div>
Its working for me, hopefully it will also work for you. Thank you!!!!!!!!
i'm trying to make captions in owl carousel. i'm using animate.css.
I've added animation to captions in carousel but it's not working for all. Only first slides caption have animation. Here is my code;
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div>
</div>
</div><!-- End Carousel -->
<style>
.caption {
position: absolute;
font-size: 1.5em;
top: 0;
left: 15px;
border:1px solid;
color:orange;
text-shadow: 2px 2px 1px #000;
padding-top: 60vh;
}
</style>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:3500,
nav:true,
})
});
</script>
I'm waiting your help about that. I'm stuck
The animation is only applied once when the class is applied to a div. Therefore all of your slides animate once at the start only, but you can only see the first div, and so nothing else happens.
If you watch for slide changes in the carousel and then remove the 'animate bounce' classes from all divs before instantly re-applying it to the one on screen then you can see each one animate.
Try this jquery:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3500,
nav: true,
margin: 10,
});
owl.on('changed.owl.carousel', function(event) {
var item = event.item.index - 2; // Position of the current item
$('h1').removeClass('animated bounce');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
});
});
and then in your html only use the 'animate bounce' classes for the first slide (remove it from the others):
<div id='monitor'>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Fourth Caption</h1></div>
</div>
</div>
<!-- End Carousel -->
This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ You had to remove class animated after change but this function is missing in owl.carousel 2: afterMove and beforeMove
I need code in jQuery to show 6 div's per slide. I have slider, and I want show only 6 div's/elements and after 6 div the code will be create next slide(div with class slide)
<div class="slide">
<div>
6elements
</div>
</div>
next slide => <div> 6 elements </div>
Slick slider
Here is a working Plunker that shows how to implement the jQuery/Slick plugin with responsive break points.
The documentation for Slick provides several options for your slides.
Javascript
$('#slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
responsive: [{
breakpoint: 600,
settings: {
slidesToShow: 1,
rows: 2,
slidesPerRow: 2,
}
}]
});
HTML
<div id="slick">
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/alhBkw5.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Qdqaawt.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Bplxu8k.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/fixuYTj.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9hpqKt0.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9VCx5.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/scV4kAY.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/PfDrZOZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/lxMUSqZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/wD1r3Yk.png"></div>
</div>
</div>
CSS
.img-container {
overflow: hidden;
max-height: 100px;
margin: 3px 5px;
}
.img-container img {
width: 100%;
}
#slick {
/* optional */
max-width: 700px;
margin: 50px auto;
}
Wordpress Function
Here is a Wordpress demo of the following php function.
PHP
Add this function to your functions.php file:
function six_images_slider() {
$args = array('numberposts' => 18);
$recent_posts = wp_get_recent_posts( $args );
$output = '<div id="slick">';
foreach ($recent_posts as $post) {
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
$output .= '<div class="slide"><div class="img-container"><img src="'.$featured_image_src.'"></div></div>';
}
$output .= '</div>';
echo $output;
}
Add this to your home.php template file:
<?php six_images_slider(); ?>
Also, it should work in any Wordpress template file.
Function Explanation
This function gets the most recent 18 posts by calling wp_get_recent_posts.
Then it loops through the posts and gets the featured image by calling get_post_thumbnail_id and passing the result to wp_get_attachment_url to get the src.