Question
Is there a way to hide the currently-active slide from a slider in Slick Slider?
Motivation
I am building a Featured Posts slider. One post will be featured prominently, while the remaining posts will feature as previews in a column on the side. A total of 5 posts will be shown at a time.
This is pretty easy to do with Slick Slider (1.9.0) but it has one issue: the "remaining posts" section should only show the remaining posts and not the current post. So when a post is selected it should scroll out of view in the slider, and the featured post slider will change to use the slide at the same index.
Description of the Action
Basically, the initial state should be:
Featured Slider: Slide 1 is visible, all others are hidden.
Remaining Slider: Slide 1 is hidden, Slides 2-5 are visible.
If I click on slide 2 from the Remaining Slider:
Featured Slider: Slide 2 is visible, all others are hidden.
Remaining Slider: Slide 2 slides out of view, Slide 3 becomes the new top post followed by (in order) 4, 5, 1.
JS Fiddle
Here's the JS Fiddle I'm working on: https://jsfiddle.net/zak_rhm/Lks61ah7/71/
HTML
<div id="Large_Slider">
<!-- Should only show one slide at a time. -->
<article class="slide">
<h2>Slide 1</h2>
</article>
<article class="slide">
<h2>Slide 2</h2>
</article>
<article class="slide">
<h2>Slide 3</h2>
</article>
<article class="slide">
<h2>Slide 4</h2>
</article>
<article class="slide">
<h2>Slide 5</h2>
</article>
</div>
<ul id="Small_Slider">
<!-- Should only show four slides at a time, never show the slide in #Large_Slider -->
<li id="slide">Slide 1</li>
<li id="slide">Slide 2</li>
<li id="slide">Slide 3</li>
<li id="slide">Slide 4</li>
<li id="slide">Slide 5</li>
</ul>
JavaScript (jQuery)
var $slider_lg = $("#Large_Slider")
var $slider_sm = $("#Small_Slider")
$slider_lg.slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '#Small_Slider',
dots: true,
fade: true
});
$slider_sm.slick({
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '#Large_Slider',
focusOnSelect: true,
vertical: true,
verticalSwiping: true
});
Just add a style in .slick-current class
#Small_Slider .slick-current {
opacity: 1;
visibility: hidden;
width:0px !important;
height: 0px !important;
}
This should do what you're looking for: https://jsfiddle.net/kmsv5xn8/
I changed your HTML so that the "Small_Slider" section begins at #2 and each slide has a data-sm-slide attribute:
<ul id="Small_Slider" class="slick-slider">
<li id="sm-slide-2" class="slide slide--sm" data-sm-slide="2">
<img src="https://via.placeholder.com/640x480.png/0f9/333?text=Slide+2" alt="Slide 2" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 2</span>
</li>
<li id="sm-slide-3" class="slide slide--sm" data-sm-slide="3">
<img src="https://via.placeholder.com/640x480.png/f09/fff?text=Slide+3" alt="Slide 3" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 3</span>
</li>
<li id="sm-slide-4" class="slide slide--sm" data-sm-slide="4">
<img src="https://via.placeholder.com/640x480.png/f90/333?text=Slide+4" alt="Slide 4" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 4</span>
</li>
<li id="sm-slide-5" class="slide slide--sm" data-sm-slide="5">
<img src="https://via.placeholder.com/640x480.png/90f/fff?text=Slide+5" alt="Slide 5" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 5</span>
</li>
<li id="sm-slide-1" class="slide slide--sm" data-sm-slide="1">
<img src="https://via.placeholder.com/640x480.png/09f/333?text=Slide+1" alt="Slide 1" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 1</span>
</li>
</ul>
That takes care of the initial offset, however to show the correct slides I disabled the focusOnSelect: true property and added an event listener instead:
$slider_sm.on("click", "li.slide", function() {
var slideNo = $(this).attr("data-sm-slide") - 1;
$slider_lg.slick("slickGoTo", slideNo);
})
The corresponding slide index is taken from the data-* attribute and updates the main carousel; because that uses the asNavFor property, Slick takes care of the rest.
Related
I have auto-moving images as a slideshow.
Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
On my code, instead of the left arrow, I have "previous" and instead of the right arrow I have "next". Unfortunately, I don't like the round backgrounds with the words "previous" and "next".
Instead of the words "previous" (including the blue circular background) and the words "next" (including the red circular background) - I would like to have normal arrows (from another slideshow) in place of "previous" and "next".
Here is another slideshow with normal arrows:
https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/
Can I put these normal arrows (from another slideshow) in place of "previous" and "next"?
An important issue!
I would also like "cursor: pointer" to only work when hovering over these normal arrows.
I will be very grateful for effective help.
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn">previous</div>
<div class="slider_btn next_btn">next</div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
You can modify the styles to remove the round background and add HTML entity for the arrows:
HTML
<div class="slider_btn prev_btn">‹</div>
<div class="slider_btn next_btn">›</div>
CSS
.prev_btn, .next_btn {
font-size:4em;
position: absolute;
cursor: pointer;
color: #ffffff;
background:0;
}
.prev_btn {
left: 50px;
}
.next_btn {
right: 50px;
}
I am using Revolution Responsive jQuery Slider (documentation)and I am trying to achieve an effect where the body background color/image would change when the slide changes.
These what I have got:
HTML:
<div class="slider-wrap">
<div class="fullwidthbanner-container" >
<div class="fullwidthbanner">
<ul>
<!-- MAIN IMAGE-->
<li data-transition="fade, fade" data-slotamount="1" data-masterspeed="1400" data-saveperformance="off" >
<img src="img/web-banner-final-1.png" id="slide1" alt="bg" data-bgposition="left top" data-bgfit="contain" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE 2-->
<li data-transition="fade, fade" data-slotamount="1" data-masterspeed="1400" data-saveperformance="off" >
<img src="img/web-banner-final-2.png" alt="bg" id="slide2" data-bgposition="left top" data-bgfit="contain" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
Now I want a green body background (#D5E24D) when slide1 appears, and an background image (abc.jpg) when slide 2 appears.
How should I write the JS? I am totally new to JS so your help is much appreciated!
I'm working on this website:
http://www.lakeofthewoodsadventures.com/local/index.html
I got the homepage image slider working, but it won't render the last two pages of the slider, no matter which files they are.
My question is: why is it doing that? Is it because it considers what is "off-page" not needed? The images are the same size, 1280x480 (scaled to 340 height).
Here are my settings:
Script in Head:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
useCSS: true,
itemWidth: 900,
});
});
</script>
Markup:
<div class="slide-container row">
<div class="flexslider slideEdit">
<ul class="slides">
<li>
<img src="images/slide6.JPG" alt="Slide 6">
</li>
<li>
<img src="images/slide7.JPG" alt="Slide 7">
</li>
<li>
<img src="images/slide8.JPG" alt="Slide 8">
</li>
<li>
<img src="images/slide9.jpg" alt="Slide 9">
</li>
<li>
<img src="images/slide10.jpg" alt="Slide 10">
</li>
</ul>
</div>
</div>
No, it is because those images do not exist (404 File Not Found):
http://www.lakeofthewoodsadventures.com/local/images/slide9.jpg
http://www.lakeofthewoodsadventures.com/local/images/slide10.jpg
Looks like it is a capitalization issue:
http://www.lakeofthewoodsadventures.com/local/images/slide9.JPG
http://www.lakeofthewoodsadventures.com/local/images/slide10.JPG
I'm working on the jquery slider (sequence master parallax). I would like to add a menu at the top which allows users to jump to each slide. My problem is that I don't manage to link my href to my div id. Actually, I don't know how to proceed. For example, when you click on Menu 1 it goes to the slide which has the div id="menu1". My other problem if I add between <li class="animate-in"> <div id="menu1"> ... </div></li> it breaks all the animation.
Here the code :
Sequence Theme Demo - Sliding Horizontal Parallax
if (typeof jQuery == 'undefined'){
document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%3E'));
}
</head>
<body>
<menu-->
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
<!--end menu-->
<div id="sequence">
<img class="sequence-prev" src="images/bt-prev.png" alt="Previous" />
<img class="sequence-next" src="images/bt-next.png" alt="Next" />
<ul class="sequence-canvas">
<li class="animate-in">
<div class="info">
<h2>Built using Sequence.js</h2>
<p>The Responsive Slider with Advanced CSS3 Transitions</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="balloon" src="images/balloon.png" alt="Balloon" />
</li>
<li>
<div class="info">
<h2>Creative Control</h2>
<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
</li>
<li>
<div class="info">
<h2>Cutting Edge</h2>
<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="kite" src="images/kite.png" alt="Kite" />
</li>
</ul>
</div>
</body>
Add a href link like this
<a href="your link">
<li class="animate-in">
<div class="info">
<h2>Built using Sequence.js</h2>
<p>The Responsive Slider with Advanced CSS3 Transitions</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="balloon" src="images/balloon.png" alt="Balloon" />
</li>
</a>
Hi I am using a javascript to get tabs functionality for buttons. In each tab I want to show a slider for which I am showing anything slider. The issue I am facing is the slider content is not showing in the 2nd and 3rd tabs.There is no issue with tabs functionality.tabs function working fine.I can able to switch from one tab to other.Could anyone help me.
Here is the script I am using for tabs functionality
<script type="text/javascript">
$(document).ready(function () {
var tabContainers = $('div.spec-nav > div');
tabContainers.hide().filter(':first').show();
$('div.spec-nav ul li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.spec-nav ul li a').removeClass('spec-actv');
$(this).addClass('spec-actv');
return false;
}).filter(':first').click();
});
</script>
HTML code for tabs and slider
<div class="spec-nav">
<ul class="serv-nav">
<li id="p1">Tab1</li>
<li id="p2">Tab2</li>
<li id="p3">Tab3</li>
</ul>
<div id="first" class="anythingSlider-theme2" style="display:block;float:left;">
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #1 -->
</div><!--first-->
<div id="second" class="anythingSlider-theme3" style="display:none;float:left;">
<ul id="slider2">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #2 -->
</div><!--second-->
<div id="third" class="anythingSlider-theme4" style="display:none;float:left;">
<ul id="slider3">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #3 -->
</div><!--third-->
</div><!--spec-nav-->
Intializtion code of anthing slider
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
$(document).ready(function(){
$(function(){
$('#slider1').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
navigationFormatter : function(index, panel){
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});
});
Is there a slider in the second and third tabs?
I used your code to put together this demo and it all seems to work for me.
Also, you don't need to wrap the code in two document ready functions, just one is enough:
$(function () { // same as $(document).ready(function(){
$('#slider1').anythingSlider({
theme: 'metallic',
easing: 'easeInOutBack',
navigationFormatter: function (index, panel) {
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete: function (slider) {
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});