How can I stop replication in owl carousel slider? - javascript

I'm working on owl carousel slider & I have to set max 5 items in a time. This is working fine when this is 5 items & more than 5 items but when there is less than 5 items then items repeating, how can I fixed it.
When there is less than 5 items then it should not be repeat.
My Code:-
$(function(){
$(".recent-visited-slider.owl-carousel").owlCarousel({
dots: true,
autoplay: true,
loop: true,
nav: true,
items: 5,
});
});
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="recent-visited-slider owl-carousel owl-theme">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div>
ThankYou for your efforts!

Related

Slick.js carousel - swipeToSlide only allows scrolling 2 or more slides

I'm trying to implement a simple carousel using Slick.js (http://kenwheeler.github.io/slick/) and for some reason I can't get it to drag just one slide.
If I attempt to drag more than one slide the functionality works perfectly. It's just dragging a single slide that wont seem to work...always snaps back.
All I'm doing is creating a carousel with swipeToSlide set to true.
HTML
$(document).ready(function(){
$('.customizer-carousel').slick({
slidesToShow: 7,
slidesToScroll: 1,
swipeToSlide: true
});
});
.customizer-carousel {
width: 100vw;
}
.customizer-carousel .slick-slide {
border: 1px solid #dadada;
text-align: center;
padding: 50px 0;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/>
<div class="customizer-carousel">
<div>option 1</div>
<div>option 2</div>
<div>option 3</div>
<div>option 4</div>
<div>option 5</div>
<div>option 6</div>
<div>option 7</div>
<div>option 8</div>
<div>option 9</div>
<div>option 10</div>
</div>
Here's a codepen of the same thing: https://codepen.io/clearmarble/pen/jeYQLV
Is everyone else seeing the same thing as me? Are you able to click and drag just a single slide forwards or backwards?
Anybody have any idea what could be done? Thanks in advance to anybody who takes a look!
The slidesToShow: 7 seems to be your problem. Try with a smaller value like eg. slidesToShow: 3.
See the example below:
https://codepen.io/MaggieSadler/pen/NGvrNq

On Slick.js how to calculate currently visible slides?

My case is I'm showing some photos with variable width on a 100% div so it adjusts to the browser width. I set slick.js in centerMode and now I want to style the 'edge' images that are just partially visible.
For this I need to know which slides are visible or not.
I know if you use slidesToShow to the right number you can style the css of 'slick-active' but the problem is that my container total width depends on user screen size and also my slides have variable width so I can't know how many slides to show.
How can I calculate easily what slides are currently visible or not? (for me the partial visible should be marked as hidden)
Fiddle example
$(".slider").slick({
focusOnSelect: true,
centerMode: true,
centerPadding: '10%',
slidesToShow: 2,
arrows: false,
infinite: true,
variableWidth: true
});
.slider div {
padding: 0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<div class="slider">
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
<div><img src="https://via.placeholder.com/100x200"></div>
<div><img src="https://via.placeholder.com/250x200"></div>
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
</div>
I write code here to get current active(showing) slide list, and get count, and do some action when slide is change: Fiddle Demo
$(".slider").slick({
focusOnSelect: true,
centerMode: true,
centerPadding: '10%',
slidesToShow: 2,
arrows: false,
infinite: true,
variableWidth: true,
});
doMyAction($(".slider").slick('slickCurrentSlide'));
$(".slider").on('swipe', function(event, slick, direction){
doMyAction($(".slider").slick('slickCurrentSlide'));
});
function doMyAction(currentSlick){
// your acction for current slick
console.log('Current Slick:', currentSlick);
}
console.log(getActiveSlickLength());
function getActiveSlickLength()
{
return $('.slick-active').length;
}
console.log(getActiveSlickIndexList());
function getActiveSlickIndexList()
{
var indexes = [];
$.each($('.slick-active'), function(key, value){
indexes[key] = $(value).data('slick-index');
});
return indexes;
}
.slider div {
padding: 0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<div class="slider">
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
<div><img src="https://via.placeholder.com/100x200"></div>
<div><img src="https://via.placeholder.com/250x200"></div>
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
</div>
I use swipe event to do action when change active slick, so that you
detect or update list on every swipe to your action, and other option
can be access, or updated as you want dependence of swipe or any other
code idea.
Note: This solution will return current active slick slides as you want, but not make sure if its optimal solution with slick.js.
You can just make the right styling for the major breakpoints using slick.js responsive method. I had to do that recently and on some breakpoints I had to turn off the centerMode and change how many images are visible so you will control how many images are visible at all times. I hope that helps if you need to see an example of the code I used please let me know!

slippry.js plugin is not working

I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>
You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>

jQuery Owl Carousel animation for items value 2

When I am trying to use owl carousel's animate In and out feature and am showing 2 items, the transition animation is not working.
This is the configuration I am trying: (items:2)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:2,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
with the following configuration animation it is working fine:(items:1)
$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
How can I achieve multiple items (specifically 2 items) animation together using owl Carousel? Is this possible with owl carousel?
Try this:
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>

Content Slider - issue with JQuery

I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam
You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs

Categories

Resources