I need to get a way to disable slick.js active slide change functionality on slick-arrow click ( not disabling arrows ).
I need the arrows to be only for swiping slide-items to left and right but the active class to be the same.
The active class will be changed only on focus on select mode.
Here is a fiddle for what we have but the arrows still change the active class to default
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
accessibility: false
});
$('.slider-nav').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: false,
focusOnSelect: false
});
$('.slider-nav .slick-slide').on('click', function(event) {
$('.slider-for').slick('slickGoTo', $(this).data('slickIndex'));
});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="slider slider-for">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
<div class="slider slider-nav">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
Related
I'm working with Slick carousel in JavaScript
http://kenwheeler.github.io/slick/
I want to show 2 slides plus part of the 3rd slide on the carousel, like in the picture below.
How do I achieve this effect?
Here is a Codepen of Slick in action
https://codepen.io/paveldominguez/pen/ElLfb
<section id="features" class="blue">
<div class="content">
<h2>Responsive Display</h2>
<div class="slider responsive">
<div>
<h3>1</h3>
</div>
<div>
<div>
<iframe width="100%" src="//www.youtube.com/embed/ubGpDoyJvmI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
</div>
</div>
</section>
i think this is a good example, it could help you. https://codepen.io/ehsantl/pen/QKGroV
with this css:
.slider {
max-width: 1400px;
margin: 0 auto;
background: red;
}
js:
var settings = {
dots: false,
arrows: false,
slide: '.slick-slideshow__slide',
slidesToShow: 2.5,
infinite: false,
centerMode: true,
centerPadding: '60px',
};
I created a slider containing a divs and text. But on slide change only the first slide is shown, rest are hidden when the slide is changed.
Please check this working fiddle, showcasing the issue : https://jsfiddle.net/rp82g5c1/
Code is used to intialise the Slick JS :
$('#main-content').slick({
arrows: false,
slidesToShow: 1,
fade: true,
adaptiveHeight: true,
responsive: [{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: false,
variableWidth: false
}
}]
});
My HTML :
<div class="main-wrapper">
<div class="faq-controls">
<div class="faq-navigation back">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="faq-navigation forward">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
<div id="main-content">
<div class="single-qa">
<div class="content-wrap">
<div class="question-wrap">
<div class="question">
<h2 class="text-center">Q.</h2>
<h3>First Question?</h3>
</div>
</div>
<div class="answer-wrap">
<div class="answer">
<h2 class="text-center">A.</h2>
<p>First Answer.. Blah Blah.</p>
</div>
</div>
</div>
</div>
<div class="single-qa">
<div class="content-wrap">
<div class="question-wrap">
<div class="question">
<h2 class="text-center">Q.</h2>
<h3>Second Question?</h3>
</div>
</div>
<div class="answer-wrap">
<div class="answer">
<h2 class="text-center">A.</h2>
<p>Second Answer.. Blah Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>
The reason it is not working is because you have not include the slick.css in your document. You should include like below:
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
Here is the Working JSFiddle
I have a 3 images in 2 rows of my slider then I want to show the other images on the second slide to fill the empty rows starting from first image.
<div class="slider">
<div class=""><img src="1.png"></div>
<div class=""><img src="2.png"></div>
<div class=""><img src="3.png"/></div>
<div class=""><img src="4.png"></div>
<div class=""><img src="5.png"/></div>
<div class=""><img src="6.png"></div>
<div class=""><img src="7.png"/></div>
<div class=""><img src="8.png"></div>
</div>
$(document).ready(function(){
$('.responsive').slick({
dots: true,
infinite: true,
slidesPerRow: 3,
rows: 2,
slidesToScroll: 1,
});
});
I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks.
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item">
<img src="images/banner/A.png" alt="A"/>
</div>
<div class="item">
<img src="images/banner/B.png" alt="B"/>
</div>
<div class="item">
<img src="images/banner/C.png" alt="C"/>
</div>
<div class="item">
<img src="images/banner/D.png" alt="D"/>
</div>
<div class="item">
<img src="images/banner/E.png" alt="E"/>
</div>
<div class="item">
<img src="images/banner/F.png" alt="F"/>
</div>
</div>
<div id="dots" class="owl-carousel">
<div class="item"><span>A</span></div>
<div class="item"><span>B</span></div>
<div class="item"><span>C</span></div>
<div class="item"><span>D</span></div>
<div class="item"><span>E</span></div>
<div class="item"><span>F</span></div>
</div>
JS:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true
});
});
Just change your JS to:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true,
dotsEach: true
});
});
I have followed this instructions, but the slider not do the fadeOut and fadeIn animation: http://www.owlcarousel.owlgraphic.com/demos/animate.html
Head Css:
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.css">
Html item:
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Javascript:
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>
$( document ).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
</script>
What is the problem?
You missed class class='owl-carousel'this is needed for owl-carousel working. I think this is the problem owl docs
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Use this css this is working
$(document).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a
</div>
<div style="width:186px">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b
</div>
</div>