Owl-carousel display alot 3 images per item - Laravel - javascript

I just started using owl-carousel and i want to display 3 images per item, so i want to make sure laravel will create an item each 3 img displayed in the slide(".item")
here is my Javascript Code
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 6,
itemsDesktop: [1400, 6],
itemsDesktopSmall: [1100, 4],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:4 // How many items you want to display
}
}
})
and here is my blade
<div class="owl-carousel owl-theme" style="margin-left: 20px">
<div class="item col-md-12">
#foreach ($AsignItems as $ItemOwned)
<div class="lms-cours-item-list">
<img class="img-fluid list-item-img" src="{{ $ItemOwned->image }}" alt="{{ $ItemOwned->log }}" />
</div>
#endforeach
</div>
<div class="item">
#foreach ($Diff as $ItemUnowned)
<div class="lms-cours-badgs-list unowned-item">
<img class="img-fluid list-item-img" src="{{ $ItemUnowned->image }}" alt="{{ $ItemUnowned->alt}}" />
</div>
#endforeach
</div>
</div>
Can you please tell me should i do to get 3 element per item ?
is there any other option ?

You can control how many items will be shown from your js Code:
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 3,
itemsDesktop: [1400, 3],
itemsDesktopSmall: [1100, 3],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:3 // How many items you want to display
}
}
})
I think this will work for you. And if you like to scroll the items automatically add this
autoplay:true,

Related

Owl Carousel item is fixed when using itemsTablet and itemsMobile

I'm using Owl Carousel 2.2.1 to create an article in a slideshow.
I did these settings to change count of items in different screen sizes:
$(".news").owlCarousel({
items: 4,
itemsDesktopSmall: [990, 3],
itemsTablet: [768, 2],
itemsMobile: [480, 1]
});
But the number of items are always 4!
This is the sample HTML:
<div class="news owl-carousel owl-theme">
<h4>Title 1</h4>
<h4>Title 2</h4>
<h4>Title 3</h4>
<h4>Title 4</h4>
</div>
The real page is here (temporarily):
http://new.khayyamkar.ir
The page is like this in mobile devices:
Try this:
$('.news').owlCarousel({
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})
Codepen: https://codepen.io/YasirKamdar/pen/BYJENy

Video carousel using owl.carousel.js is not working

Video carousel is not displayed in html page while trying to use owl.carousel.js. Anyone please help me to setup a video carousel in my website.
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:3
}
}
})
<html>
<body>
<div class="owl-carousel owl-theme">
<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
</body>
</html>

How to make Owl Carusel slider looks like this

How to make my carusel looks like this slider on the picture.
The center image overlapping the two other images.
$('.owl-carousel').owlCarousel({
stagePadding: 10,
loop:true,
margin:0,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
},
1200:{
items:1
}
}
})
and this is the html code
<div class="owl-carousel">
<div class="item"><img src="img/slider1.png" alt="" /></div>
<div class="item"><img src="img/slider1.png" alt="" /></div>
<div class="item"><img src="img/slider1.png" alt="" /></div>
</div>

owl carousel scroll to clicked item

I have a simple owl-carousel,
HTML:
<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 class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
JavaScript:
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
Included:
owl.carousel.js
owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?
<html>
<head>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
.owl-carousel .item {
height: 80px;
background: #4DC7A0;
}
</style>
</head>
<body>
<div id="owl-demo">
<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 class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(document).on('click', '.owl-item', function(){
n = $(this).index();
console.log(n)
$('.owl-wrapper').trigger('owl.goTo', n);
});
});
</script>
</body>
</html>
There are was few trouble with version, and thats why i send you full html page - try it to yourself!
You can try next code:
var sync2 = jQuery('.sync2').owlCarousel({
loop:true,
margin:0,
nav:false,
dots:false,
responsive:{
0:{
items:4
}
},
center: false,
navText: ["",""],
linked: ".sync1"
});
sync2.on('click', '.owl-item', function(event) {
var target = jQuery(this).index();;
sync2.owlCarousel('current',target);
});
Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$('button').trigger('to.owl.carousel', 1);
None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :
//Select by id if one is set or via '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**
//Scroll to last selected carousel
$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');
//scroll to last clicked item
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}

Sly Scroller Jquery

i would like to use following plugin http://darsa.in/sly/ but i cant get it to work, here are some details to my code.
i have following HTML:
<div class="scroller">
<div class="scrollbar">
<div class="handle" style="-webkit-transform: translateZ(0px) translateX(0px);"></div>
</div>
<div class="sly" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0);">
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li>
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li></ul>
</div>
</div>
and following JS:
$(document).find(".scroller").each(function (i, element) {
var $cont = $(element),
$frame = $cont.find(".sly"),
$scrollbar = $cont.find(".scrollbar");
$frame.sly({
// Sly type
horizontal: 1, // Change to horizontal direction.
itemNav: null, // Item navigation type. Can be: basic, smart, centered, forceCentered.
// Scrollbar
scrollBar: $scrollbar, // Selector or DOM element for scrollbar container.
dragHandle: 0, // Whether the scrollbar handle should be dragable.
dynamicHandle: 0, // Scrollbar handle represents the relation between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: 0, // Enable navigation by clicking on scrollbar.
syncFactor: 0.50, // Handle => SLIDEE sync factor. 0-1 floating point, where 1 = immediate, 0 = infinity.
});
$frame.sly('reload');
});
But somehow Sly-Scroller doesn't work? Thanks for help!
First of all Load all the Scripts for SLY in the end of your body :
<script src="js/jquery.easing.js"></script>
<script src="sly/horizontal.js"></script>
<script src="http://darsa.in/sly/js/vendor/modernizr.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js" ></script>
Then Call the HTML like this :
<div id="navigation">
<div class="wrap">
<h2>Video Playlist</h2>
<div class="scrollbar" style = "width:100%">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame " id="basic">
<ul class="clearfix">
<li> </li>
</ul>
</div>
<ul class="pages"></ul>
</div>
</div>
here you go! Credit goes to this blog writer...
don't forget to click on "download", see more details there!
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/
try this, its work for me
$(document).find('.row').each(function () {
var $slider = $(this).find('#contentSlider');
var $wrap = $slider.parent();
$slider.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
});

Categories