Develop Reference

Slick js on arrow click active slide stay the same

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>

Can't center Slick Carousel on page

I'm using the Slick Carousel (slick.js) but am having trouble horizontally centering the carousel on the page.
HTML:
<!-- logo slider -->
<section id="customer-carousel" class="slider responsive container m-5">
<div>
<img src="/images/customers/eth_zuerich_logo.png" class="customer-slide">
</div>
<div class="text-center">
<img src="/images/customers/kbsi_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/max-planck-institute-goettingen.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/nc_state_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/osaka_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/phoenixnmr_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ruhr_universitaet_bochum_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/synex_medical_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/technical_university_of_brno_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_ilmenau_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_kaiserslautern_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ucsb_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/UMD_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/unh-logo.png" class="customer-slide">
</div>
</section>
<!-- /logo slider -->
CSS:
#customer-carousel {
width: 100%!important;
}
.customer-slide {
width: 8rem;
max-height: 10rem;
margin-left: auto;
margin-right: auto;
}
JS:
(function ($) {
'use strict';
// Preloader js
$(window).on('load', function () {
$('.preloader').fadeOut(100);
});
// Accordions
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.ti-angle-right').removeClass('ti-angle-right').addClass('ti-angle-down');
}).on('hidden.bs.collapse', function () {
$(this).parent().find('.ti-angle-down').removeClass('ti-angle-down').addClass('ti-angle-right');
});
//slider
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
dots: true,
arrows: false
});
})(jQuery);
The page is staged here & the carousel is right on the home page (customer logos):
http://bridge12-staging.s3-website.us-east-2.amazonaws.com/
Really appreciate your help!
Thanks!
Mike

There is a class "m-5" on the slider that's setting the margins to 3rem!important. Removing that class seems to fix the horizontal centering. If that class is needed, you could override the margins in your CSS by ID:
#customer-carousel {
margin-left: auto!important;
margin-right: auto!important;
}

Slick JS - Only first slide is visible, others always hidden

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

How to show pagination dots in owl carousel

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
});
});

OWL Carousel 2 incorrect width, shows all items

I have the following OWL Carousel 2 initialization code:
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
This results in the following html of the carousel:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.
Please provide some guidance on what could be the solution!
Kind Regards.

I solved my problem by adding this code to css:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}

Add singleItem:true to your javascript.
This will make it display only a single image at a time.

The width of the owl stage div will always extend past the parent carousel container (div id="owl-slider" class="owl-carousel owl-theme") if there is more than one item in the carousel. This is easily fixed by setting overflow to hidden in your CSS.
.owl-carousel {
overflow: hidden;
}