Owl Carousel doesn't work properly - javascript

I implemented the code and files as explained on the owl carousel website but what appears are only large images at full width, and the slider doesn't work. Is there anything wrong with my code?
Edited: After i implemented it into my website, it doesn't work again, Please check the update of the JavaScript i added below: Note there are two sliders on my website
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="mine.js"></script>
<title>UltraMax</title>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
];
var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*Jssor Slider Begin end*/
};
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>
</head>
<body>
<div id="owl-demo">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
</div>
</body>
</head>
</html>
Here is the css
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

Change the sequence of jquery libraries like this:-
<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
And you are good to go.

Related

Styling SwiperJS to show partial slides on either side

Im looking for a little help to complete my SwiperJS implementation to replace other sliders on my site - the intent is to have variable width slides - if there is a landscape slide in the centre then show it and a little bit of the preceding and following slides on either side but if it is portrait show a bit more - the images might make what I mean clearer
I have got SwiperJS set up as follows - it works but it only shows one image at a time, I need the partial preceding and following slides to show as well, I'm guessing it is one tiny step away from where it needs to be, but I cannot work it out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 400px;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
background-color:#ffcc00;
}
.swiper-slide {width:100%;height:100%;}
.swiper-slide img {
height:100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/900x600.png?text=900x600'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
<div class="swiper-slide"><img src='https://via.placeholder.com/600x900.png?text=600x900'></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria- controls="swiper-wrapper-181ef273d22e62b1"></div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria- controls="swiper-wrapper-181ef273d22e62b1"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 30,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
Landscape image in the slider with partial slides on either side
Portrait image in the slider with partial slides on either side
I think you should try slidePerView: 2.5:
https://stackblitz.com/edit/7z4hsr-ld2tx8?file=index.html
or to specify slide width:
https://stackblitz.com/edit/7z4hsr?file=index.html

How to add play button inside responsive slide

I have a set of images to display using a responsive slide. I found a link to create responsive slide: http://responsiveslides.com. I don't know to add pause/play button inside the slide. My code is as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
The above is the source code. How can I add pause and play button into my slide?
Do you necessarily have to use that library or can you listen to another option?
I recommend you swiper. It is a better library in my opinion. Here is the get-started link.
In this example you can change the value of the boolean autoplay with methods start() (to autoplay the slider) and stop() (to pause it).
Here you have an example. Hope it helps:
$(document).ready(function() {
new Swiper('.swiper-container', {
speed: 600,
spaceBetween: 90,
autoplay: true,
disableOnInteraction: true,
loop: true
});
const mySwiper = document.querySelector('.swiper-container').swiper;
let isSliderActive = true;
$("#slider-control").click(function() {
if (isSliderActive) {
mySwiper.autoplay.stop();
isSliderActive = false;
this.innerHTML = 'PLAY';
console.log('slider stopped');
} else {
mySwiper.autoplay.start();
isSliderActive = true;
this.innerHTML = 'PAUSE';
console.log('slider activated');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" />
<style>
.swiper-slide { text-align: center; }
</style>
<div class="swiper-container">
<!-- required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 1</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 2</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 3</div>
</div>
</div>
</div>
<button id="slider-control">PAUSE</button>
If you can use another plug-in. wow slider You will get by default pause and play buttons.

Owl Carousel 2 Integration With Elevated Zoom

I am trying to apply zoom on the selected/active image in owl carousel. For this I have applied a special class "zoomimage" to active image. But for some odd reason I am unable to get elevateZoom to work.
var owl2 = $('.owl-carousel');
owl2.owlCarousel({
nav: true,
loop: true,
items:1,
center:true,
});
owl2.on('changed.owl.carousel', function(property) {
var current = property.item.index;
$(".owl-item").find("img").removeClass("zoomimage");
$(property.target).find(".owl-item").eq(current).find("img").addClass("zoomimage");
})
$('.zoomimage').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
.owl-theme img {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://3.imimg.com/data3/UD/XH/MY-9326144/hybrid-cow-500x500.jpg" data-zoom-image="https://3.imimg.com/data3/UD/XH/MY-9326144/hybrid-cow-500x500.jpg">
</div>
<div class="item">
<img src="http://www.floridamilk.com/core/fileparse.php/77/urlt/Holstein-Cow-Headshot.jpg" data-zoom-image="http://www.floridamilk.com/core/fileparse.php/77/urlt/Holstein-Cow-Headshot.jpg">
</div>
<div class="item">
<img src="http://www.canadianbic.ca/wp-content/uploads/2016/10/Cows-500x500.jpg" data-zoom-image="http://www.canadianbic.ca/wp-content/uploads/2016/10/Cows-500x500.jpg">
</div>
</div>
You can also view it on JSFiddle

Jplayer Playlist Fullscreen not working

I try to blow up a video in the JPlayer Playlist to fullscreen (full size). But the size always stays the same.
Here the source:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Playlist</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
$("#jquery_jplayer_1").jPlayer("option", {"fullScreen": true});
var playlist = [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
}
];
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v",
fullScreen: true
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-full">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 100%; height: 100%;"></div>
</div>
<div class="jp-playlist" style="display:none;">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Unable to play your Video</span>
</div>
</div>
</body>
</html>
In the HTML I see that there is a style on the element that just always stays the same. 480px x 270px. I tried to add a style with a different size but it seems that it is always overwritten.
<div id="jp_container_1" class="jp-video jp-video-full jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 480px; height: 270px;">
<img id="jp_poster_0" style="width: 480px; height: 270px; display: none;">
<object id="jp_flash_0" width="1" height="1" name="jp_flash_0" data="jplayerd/js/Jplayer.swf" type="application/x-shockwave-flash" tabindex="-1" style="width: 480px; height: 270px;">
</div>
</div>
If I use only the Jplayer without the playlist following code is working:
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="jplayerd/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
})
.jPlayer("option", {"fullScreen": true})
.jPlayer("play");
},
swfPath: "jplayerd/js",
supplied: "m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
smoothPlayBar: true,
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>
It seems like the fullScreen option is not correctly parsed to the player. Can somebody tell me how I can get this working with the playlist addon?
I'm using JPlayer 2.5.0.
Remove the line fullscreen: true from your options variable
New code
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v"
};
Working Demo
Refer more from here for jplayer playlist

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