I have on the page, there are two identical sliders, but they may be more. I need to make a custom button Next for each of sliders. I try to do so:
HTML
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
jQuery
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
Demo: http://codepen.io/fabric/pen/bwprxJ
Update:
Second demo: http://codepen.io/fabric/pen/KgzZVz
If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?
Add unique ids+ class to each slider & navigation
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
$('.slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/anon/pen/QKNxNj
for your second example you change the navigation id to a class
$('.slider').slick({
dots: true
});
$('.next').click(function(){
$(this).prev().slick('slickNext');
});
http://codepen.io/anon/pen/vXGAxb
A more elegant solution might be to trigger off a class name, and then create nextArrow events for each instance of that class.
$('.slider-wrap').each(function (index, sliderWrap) {
var $slider = $(sliderWrap).find('.slider');
var $next = $(sliderWrap).find('.next');
$slider.slick({
dots: true,
nextArrow: $next
});
});
And change the button id's to classes. This has the added benefit of giving you a copy/paste'able template for variable amounts of sliders on a single page without having to create unique id's each time.
*edit: working solution http://codepen.io/nominalaeon/pen/gwAdjd
You should use unique ids for this
$('#slider1').slick({
dots: true,
nextArrow: $('#next1')
});
$('#slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/pranesh-r/pen/qakKNY
Related
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 using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()
You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.
Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.
https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
How can I add 'active' class to the buttons?
Currently buttons have a button.secondary:hover & button.secondary:focus
to create a button background color change.
This is fine, except whenever clicking anywhere in the slider the focus is changed and so the background color is removed from the button.
I need the buttons to have a dedicated active state, so that clicking within the slider is possible.
Thanks
You can solve this with javascript or jQuery, here's a jQuery example:
$(document).ready(function() {
$('.button').on('click', function(){
$('.button').removeClass('active');
$(this).addClass('active');
});
});
This removes the 'active' class for all buttons when you click any element with the class 'button' and adds it to the one you're clicking.
After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
I have 2 sync slider in the top slider I need to add at a specific place informations which is not in the bottom slider. How could I still keep this in sync correctly?
HTML:
<div class="example example1">
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
Only exist here
</div>
<div>4</div>
</div>
<div class="slider slider-nav">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
</div>
</div>
Javascript:
jQuery('.example1 .slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
asNavFor: '.example1 .slider-nav',
dots: false,
arrows:true,
appendArrows: '.pr_images',
prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example1 .slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.example1 .slider-for',
dots: false,
arrows:false,
centerMode: false,
focusOnSelect: true
});
Fiddle: http://jsfiddle.net/45w9k4qb/
Have you tried the option
slide: '.slide'
As shown here:
https://codepen.io/quarkus/pen/JKPgza
So If you give all the slide you want visible the class .slide it might work?