Slick Carousel Not Centering Image

Slick Carousel Not Centering Image - javascript

I've got slick carousel on my page and working. I'm trying to make the images center though I'm not having much luck. I've looked at other questions and tried their solutions but still no luck.
Class for carousel
<div class="your-class">
<div class="ad1img">
<img src="images/ad1.jpg" /></div>
<div class="ad2img">
<img src="images/ad2.jpg" /></div>
<div class="ad3img">
<img src="images/ad3.jpg" /></div>
</div>
Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
</script>
CSS
.ad1img {
margin: 0 auto;
}
.ad2img {
margin: 0 auto;
}
.ad3img {
margin: 0 auto;
}
Carousel Example

You may need to set an outer div width and then can center the inner contents:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
.your-class {
width: 800px;
border: 1px solid black;
}
.img-div {
width: 100%;
}
.img-div img {
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>

You have to center you image> See code below
HTML
<div class="your-class">
<div class="adimg ad1img">
<img src="" />
</div>
<div class="adimg ad2img">
<img src="" />
</div>
<div class="adimg ad3img">
<img src="" />
</div>
</div>
CSS
.adimg img{
margin: 0 auto;
}

Use CSS like this:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/><!-- Add the slick-theme.css if you want default styling --><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>.your-class {
width: 20px;
border: 1px solid black;
}
.ad1img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad2img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad3img {
margin: auto;
width: 50%;
padding: 10px;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>

Related

GIF files are not animated in the Swiper slider

I need gifs to be animated always. When the page loads, the gif animates for the first second, and then stops. In order for it to start, I have to press the left mouse button.
When I remove the cursor from the image, it becomes inactive again.
What can be done to make gifs animated? What are the ways to solve this problem.
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
.main {
position: absolute;
//padding: 16px;
//margin-top:60px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
position: relative;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Gif</title>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="main">
<h1 class="left-element">12345</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
</html>

How to make image sliders to come down and form a table?

I did a swiper slideshow that swipes images automatically and it is working very well. but now I would like to make all the images with the information written below it to go down after doing the slideshow and appear in the form of a table. Below is my source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/swiper.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<script type ="text/javascript" src="../js/swiper.min.js"></script>
<style type="text/css">
body
{
background: black;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
background: white;
}
.swiper-slide .imgBx{
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-slide .imgBx img{
width: 100%;
}
.swiper-slide .details{
box-sizing: border-box;
font-size: 20px;
padding: 20px;
}
.swiper-slide .imgBx h3{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .imgBx h3 span{
font-size: 16px;
color: red;
}
</style>
</head>
<body style="background: grey ;">
<div class="row" >
<div class="col-md-3 input-group input-group-sm" style="margin-left: 70%; margin-top: 10px;">
<input type="number" name="numb" class=" form-control col-sm" placeholder=" Mentors" >
<button type="submit" class="btn btn-dark acc_active">Ment</button>
</div>
</div>
<div class="row" style="margin-left: 350px; margin-top: 250px;" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-12 container d-flex">
<div class="box-1">
<div class="ping">
</div>
</div>
<div>
<a href="table.php>"> <button id="btn-go" style="width: 100px; margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
Shuffle
</button></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="box-1">
<div class="ping">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 60,
stretch: 15,
depth: 190,
modifier: 3,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
<?php
include "header.php";
?>
<?php
include "footer.php"
?>

CSS: Overflow:hidden not working on full screen

I've added the below slider (photo with text) code to my blogger html/javascript gadget. I want the slider to show the main testimonial in the middle and 2 cropped testimonials on the left and the right.
The code was supposed to look like this: https://i.imgur.com/eGM4h33.png
But it ended up like this: https://i.imgur.com/uZldIjd.png
Any idea how the issue can be solved? Here's the code:
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 2,
autoplay: false,
dots: true,
nav: true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
.testimonials {
position: relative;
overflow: hidden;
padding-top: 10px;
}
#customers-testimonials .item-details {
background-color: #F7F6F6;
color: #4A4A51;
padding: 0.5em 0.5em;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 0.2em;
font-size: 1em;
line-height: 1em;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 0.2em;
}
#customers-testimonials .item-details p {
font-size: 1em;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 10px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #000;
border: 1px solid #000;
text-align: center;
}
.owl-carousel .owl-prev {
left: 10px;
}
.owl-carousel .owl-next {
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container" style="padding:0">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'>
</script>

How to conditionally add next and prev arrows based on slick carousel width?

I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:

I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>

owlcarousel - dots do not appear

I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.
I have set the dots to true but they do not appear. My work so far is the following:
.container {
width: 90%;
margin: 0 auto;
}
/*Text over image*/
.item {
width: 100%;
}
.item img {
display: block;
max-width:100%;
}
/*Carousel Nav Buttons*/
.carousel-nav-left{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
margin: auto 0;
margin-left: -40px;
}
.carousel-nav-right{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
margin: auto 0;
margin-right: -40px;
}
#media (max-width: 700px) {
.carousel-nav-left{
margin-left: -30px;
}
.carousel-nav-right{
margin-right: -30px;
}
.container {
width: 85%;
}
}
#media (max-width: 410px) {
.carousel-nav-left{
margin-left: -25px;
}
.carousel-nav-right{
margin-right: -25px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>owlcarousel</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="carousel">
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
(function($){
$('.carousel').owlCarousel({
items: 4,
loop:true,
margin:10,
nav:true,
navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
dots: true,
paginationSpeed: 300,
rewindSpeed: 400,
responsive:{
0:{
items:1
},
490:{
items:2
},
770:{
items:3
},
1200:{
items:4
},
1500:{
items:5
}
}
})
})(jQuery);
</script>
</body>
</html>
Please let me know how I can fix this issue

I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.
I figured later that there are 2 css files required to be included. One is the own-carousel.min.css and the other is owl.theme.default.min.css. After this the container div should have the owl-carousel and owl-theme class in their class list. For e.g:
<div id="slider" class="owl-carousel owl-theme">
<img src="/dist/assets/img1.jpg" />
<img src="/dist/assets/img2.jpg" />
<img src="/dist/assets/img3.jpg" />
<img src="/dist/assets/img4.jpg" />
</div>
Hope this helps for people who are facing this issue later.

Classes owl-carousel and owl-theme on main container are necessary for the dots to appear.

Ensure that you have included all of the necessary resources:
jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css
Also, make sure your CSS includes the appropriate owl-page and owl-controls
Here is one example of vital CSS code:
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
As seen in This JSFiddle.
Note that if you remove the dots: true from the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.
Additional Answer
As this is the accepted answer I will add another potential fix as provided by #Kevin Vincendeau and brought to attention by #Amr Ibrahim in the comments.
Check to make sure your HTML is including all of the necessary classes. Such as owl-carousel and owl-theme on the main container.

The point was the lack of the owl-theme class in your code!
Include CSS & JS resources
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Set up your HTML
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
Note: if you dose not include the owl-theme class in the parent Div then the Dots dose not appear to you. So it is necessary to make them visible to end
users.
Call the plugin
Now call the Owl initializer function and your carousel is ready.
$(function(){
$(".owl-carousel").owlCarousel();
});
Demo:
$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>

Adding css worked for me!
.owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
border-radius: 30px;
}
.owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #869791;
}

According to Owl Carousel docs, you have to call the 2 CSS files below (inside head tag):
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
then near to footer tag, call JQuery and Owl Carousel JS scripts:
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
I was facing the same issue on my code, then i just empty all owl and jquery files, read the owl docs, following the installation process step by step. Now it works fine for me.

Please note that the Owl Carousel dots will only show up when you have enough items.
Forexample, if you show 3 items at the same time, the dots will only show up if there is 4 or more items in that carousel.

$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
dots: false,
margin: 5,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
});
Try : dots: false,

We Keep Coding

JavaScript is the programming language of the Web.

Slick Carousel Not Centering Image - javascript

You have to center you image> See code below HTML <div class="your-class"> <div class="adimg ad1img"> <img src="" /> </div> <div class="adimg ad2img"> <img src="" /> </div> <div class="adimg ad3img"> <img src="" /> </div> </div> CSS .adimg img{ margin: 0 auto; }

Related

GIF files are not animated in the Swiper slider

How to make image sliders to come down and form a table?

CSS: Overflow:hidden not working on full screen

How to conditionally add next and prev arrows based on slick carousel width?

owlcarousel - dots do not appear

Categories

Resources