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;
}
Related
I created a carousel using 'Slick' but I want to change the 'Previous' and 'Next' buttons into arrows. How do I do that?
This is my code:
$('.horizontal').slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
You can use prevArrow and nextArrow to customize the code from your arrows. Something like this:
$('.horizontal').slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
prevArrow: '<button type="button" class="slick-custom-arrow slick-prev"> < </button>',
nextArrow: '<button type="button" class="slick-custom-arrow slick-next"> > </button>'
});
Then you style it with css. You can change the button elements to an a, or anything you like. Also you can append the arrows elsewhere, outside of your carousel, with appendArrows. Just select an element and pass it as a parameter.
var $element = $('.js-arrow-wrapper');
$('.horizontal').slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
appendArrows: $element
});
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
I'm creating a site to showcase my client's photography. I have several different main images that rotate in a slideshow. I want the link to that specific category to change to a different color when it's corresponding image is shown. My function works perfectly for the 1st image but it won't work for my second one. Can someone read my code and see what may be wrong? I'm not getting any errors in the console and I believe it should work since it's literally the same function as the first one. Thank you so much!!
<!-- Photo Slider -->
<div id="maincarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid natureMain" src="bppnature/Hope.jpg">
</div>
<div class="item">
<img class="d-block img-fluid buildingMain" src="bppbuildings/here comes the sun (around the way).jpg">
</div>
<div class="item">
<img class="d-block img-fluid fashionMain" src="bppfashion/Eye Eternal.jpg">
</div>
<div class="item">
<img class="d-block img-fluid productMain" src="Main Images/Proper Prepardness.jpg">
</div>
<div class="item">
<img class="d-block img-fluid abstractMain" src="bppabstract/Interconnected.jpg">
</div>
<div class="item">
<img class="d-block img-fluid coverMain" src="bppcoverart/Black EGYptian BastARD (right).jpg">
</div>
<div class="item">
<img class="d-block img-fluid graffittiMain" src="bppgraffitti/Gang'N'em.jpg">
</div>
<ol class="carousel-indicators">
<li data-target="#maincarousel" data-slide-to="0" class="active"></li>
<li data-target="#maincarousel" data-slide-to="1"></li>
<li data-target="#maincarousel" data-slide-to="2"></li>
<li data-target="#maincarousel" data-slide-to="3"></li>
<li data-target="#maincarousel" data-slide-to="4"></li>
<li data-target="#maincarousel" data-slide-to="5"></li>
<li data-target="#maincarousel" data-slide-to="6"></li>
</ol>
</div>
</div>
$(document).ready(function(){
// $("#mainslider").slick({
// infinite: true,
// slidesToShow: 1,
// slidesToScroll: 1,
// centerMode: true,
// // autoplay: true,
// // autoplaySpeed: 2000,
// pauseOnHover: true
// });
highlightNatureMain();
highlightBuildingMain();
$('.slickcarousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
// autoplay: true,
// autoplaySpeed: 2000,
pauseOnHover: true
});
carouselDisplay();
// animationNature();
// animationBuilding();
// animationFashion();
// animationProducts();
// animationAbstract();
// animationCovers();
// animationGraffiti();
// animationProjects();
// stopHover();
// imageHover();
setInterval(function(){ nameFlash();}, 3000);
});
function highlightNatureMain() {
if ($(".natureMain").parent("div").hasClass("active")) {
$('.nav-nature').css('color', 'purple');
}
else {
$(".nav-nature").css("color","white");
}
}
function highlightBuildingMain() {
if ($(".buildingMain").parent("div").hasClass("active")) {
console.log("br");
$('.nav-building').css('color', 'purple');
}
}
If all you want to do is change the CSS on the slides, you are over-complicating things - you don't need javascript at all!
CSS-only
You already have classes associated with your slides, so you just need to create rules for those classes, e.g.
.item .nav-nature{ color: purple;} /* default colour for this element */
.item.active .nav-nature{ color: white;} /* colour when this item is active */
.item .nav-building{ color: purple;}
.item.active .nav-nature{ color: white;}
jQuery Callback functions for Slick slider
However if you did need to do something in jQuery, slick slider has callback functions beforeChange and afterChange, so you could use those, e.g.
jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
switch(nextSlide){
case 1: /* next slide is the first slide */
[... do something...]
break;
case 2: /* second slide */
[...]
break;
}
}
Use Callback to set link colour
If you do need to set the CSS for the links through jQuery, a handy way to do it is to use an array for the colours - the currentSlide and nextSlide are the slide positions, so you can use them as the key to the array, e.g.
CSS - set the default colours for the links
.item .nav-nature{ color: purple;}
.item .nav-building{ color: purple;}
jQuery - set the colour for the active slide
/* an array of the link colours, corresponding to the slides */
var linkcolours = ["white", "white", "blue", "red", etc...];
jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
/* set the active slide colour to the position of the corresponding slide
e.g. get the 1st element from the array (index=0) for slide 1 etc */
$(".item.active a").css("color", colours[nextSlide-1]);
});
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');
});
I have a carousel slider,
when I click on a thumb an image needs to be loaded in the large banner.
How can I do this?
It needs to be smooth, it shows a large image, when clicking on a thumb that thumb needs to fade-in over the existing image. But first I need to get it working thow.
Example here
New other example is here!
<div class="big">
<img src="http://placehold.it/476x300&text=first" />
<img src="http://placehold.it/476x300&text=sec" />
<img src="http://placehold.it/476x300&text=third" />
<img src="http://placehold.it/476x300&text=four" />
<img src="http://placehold.it/476x300&text=five" />
</div>
<div class="owl-carousel small">
<div class="item">
<img src="http://placehold.it/238x150&text=first" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=sec" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=third" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=four" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=five" />
</div>
</div>
script:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: false,
loop: false,
margin: 20
}
}
})
})
You need to attach an event handler to each image,
I see you are loading jQuery which makes this nice and easy
$(function(){
$(".big img:eq(0)").nextAll().hide();
$(".es-slides .es-slide-inner img").click(function(e){
var index = $(this).index();
$(".big img").eq(index).show().siblings().hide();
});
$('#basic_slider img').each(function(i,image){
$(image).on('click', function(){
$('.big').html('<img src=\''+ image.src + '\'/>');
});
});
});
We are using the jQuery each method to loop through each image in the carousel, then update the html inside the with an image tag that has the correct src for the image.
Alternatively you could show/hide the images in the .big container like your html already shows. This will probably work better for fading the images in and out as you wish.
Fiddle