I am trying to change the width of the images in my owl-carousel.
<!-- Slider -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel owl-carousel-fullwidth">
<div class="item"><img src="images/frontview.jpg" alt="image"></div>
<div class="item"><img src="images/entry.jpg" alt="image"></div>
<div class="item"><img src="images/register.jpg" alt="image"></div>
<div class="item"><img src="images/bulk2.jpg" alt="image"></div>
<div class="item"><img src="images/herbs3.jpg" alt="image"></div>
<div class="item"><img src="images/overhead.jpg" alt="image"></div>
</div>
</div>
</div>
</div>
<!-- Slider -->
If I right-click on the image to inspect the element, it this inline style:
<div class="owl-item" style="width: 960px; margin-right: 0px;">
The only information I can find about width in the docs is about the autoWidth, which doesn't help me.
Any ideas? Thank you!
var owlCarouselFeatureSlide = function() {
$('.owl-carousel').owlCarousel({
animateOut: 'fadeOut',
autoplay: true,
autoplayTimeout: 5000,
autoHeight: true,
items: 1,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
// smartSpeed: 500,
navText : ["<i class='icon icon-chevron-left'></i>","<i class='icon icon-chevron-right'></i>"]
});
};
Owl Carousel dynamically sets the widths of div.item when the browser window resizes, but not elements within each div.item. So, you can provide CSS to do that. Since you're already using Bootstrap, have a look at these CSS classes that it provides https://getbootstrap.com/docs/4.0/content/images/
Related
My code:
<div class="tab-pane fade in active" id="home">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="www.example.com" data-toggle="modal" data-target="#123" onclick="window.open(this.href, '_blank');">
<span class="coupon-code-value">123</span>
</a>
</div>
</div>
....
</div>
<div class="dhs-controls">
<div class="dhs dhs-prev"></div>
<div class="dhs dhs-next"></div>
</div>
</div>
<!-- Modal -->
<div id="123" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
....
//script for swiper slider
var swiper = new Swiper(".swiper-container", {
preloadImages: false,
freeMode: false,
slidesPerView: 1,
spaceBetween: 10,
loop: false,
grabCursor: true,
mousewheel: false,
observer: true,
observeParents: true,
navigation: {
nextEl: '.dhs-next',
prevEl: '.dhs-prev',
}
});
In above code, both tabs and slider are working fine. Modal div exist in the code. But Modal popup is not showing when I click the modal link.
I have tried giving highest z-index value for modal class and also tried giving negative z-index value to swiper-container class. Still its not working..
Can anyone please tell me where I am doing wrong? Is it possible that modal works with slider?
I want to find center item, in owl carousel 2 (in native) not select by class like $('.owl-item.center') I want to find it by owl carousel native function and result, now I can get event, and there are bunch of results, I can get any value related to center
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log(e);
if (e.itemClass === 'center') {
alert('it is center one!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
how can I detect owl carousel 2 center item in native? again, I don't want to find jquery find items by center class with find each or any other selector, I want to owl give it to me.
I don't think owl carousel provide such option to get center item in event result. you can do this littly tricky like this, just get e.item.index it is current active item, then +1 to get centered item. check example below:
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log('center item is:'+ (e.item.index + 1));
});
.item {
border: 1px solid;
text-align: center;
}
.owl-item.active.center {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
I want to use Slick carousel on my website but i can't make the first example (single item) from kenwheeler.github.io/slick/ to work. Maybe i forgot something but i cannot find what.
Here is my code (also on jsfiddle) :
HTML
<div class="slider single-item slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
<div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
<div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
<div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
<div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
<div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
<div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button type="button" data-role="none">1</button></li>
<li><button type="button" data-role="none">2</button></li>
<li><button type="button" data-role="none">3</button></li>
<li><button type="button" data-role="none">4</button></li>
<li><button type="button" data-role="none">5</button></li>
<li><button type="button" data-role="none">6</button></li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Thanks.
Edit : When i check event listeners on buttons with the developper tools, i've nothing, contrary to the same carousel on slick documentation (http://kenwheeler.github.io/slick/#demos).
On the Slick website, there is a click event listener on the next arrow button, as you can see on the screen :
I don't know why this event listener doesn't exist in local (jquery is correctly loaded by the way).
Many mistakes on your jsfiddle
Your HTML was a copy-paste that is already marked up by the library
You need to load jQuery before slick
You included a 1.12 jquery that doesnt exist(didn't matter but worth pointing out)
HTML:
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<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>
</section>
JS:
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Here's a jsfiddle.
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);
I'm trying to implement this 3D slide from the iDangerous Swiper. I could not figure where the width and height of the div class=swiper-slide come from. Below is the body body:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/2.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/4.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/3.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/5.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/7.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/6.jpg)">
</div>
</div>
</div>
<script src="scripts/idangerous.swiper-2.0.min.js"></script>
<script src="scripts/idangerous.swiper.3dflow-2.0.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:3,
loop:true,
//Enable 3D Flow
tdFlow: {
rotate : 30,
stretch :10,
depth: 150,
modifier : 1,
shadows:true
}
})
</script>
When I use firebug to look at the height and width, I could not find where the height: 189px; and width: 293.333px; came from. Any help is much appreciated.