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
Related
I'm having some problem with the slider. I have using this slider on WordPress page with custom plugin that allow to add html/css/js after an update I have lost a script so I can't find.
The problem is this normally is an image without color, but on hover I want to show the original image with color, pagination is working well, so next image need to be shown without color. I will share the code that I have with missing js for hover to show other image.
As you can see I have 2 links
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
first line for slider that is normally shown
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
second line for the slider that need to be shown only on mouse hover
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false
// },
autoplay: false,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
$(".swiper-container").mouseenter(function() {
swiper.autoplay.start();
});
$(".swiper-container").mouseleave(function() {
swiper.autoplay.stop();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
<div class="slider-comp core-slider">
<div class="core-slider__info">
<div class="core-slider__arrows">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="core-slider__images">
<div class="custom-swiper swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_2-1.jpg" />
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
You could add a class to the img-tags and add the styles for the hover-effect. Hide the hover image as default. If you hover on the div around the images, hide the default image and show the other one.
.hover_img{display: none;}
.aspect-ratio:hover .hover_img{
display: block;
}
.aspect-ratio:hover .standard_img{
display: none;
}
<div class="aspect-ratio">
<img class="standard_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
<img class="hover_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
</div>
You could also place the hover-image absolute above the standard image and add some effects.
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.
There's a few issues with video backgrounds in the Slick.js carousel that I am running into.
HTML:
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="images/01.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/02.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/03.jpg">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" autoplay muted loop preload>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
JS:
$("#mySlick").on('init', function(event. slick){
$(".carousel-item-background").each(function(){
$(this).find('.bgVid').get(0).play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid(){
$("video[class='bgVid']").each(function(){
var ve = $(this);
var $video = ve.get(0);
if ($video.paused){
$video.play();
}
});
};
Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.
The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.
The code you posted in your question contains errors and does not work at all.
I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.
Also it is not clear where you're calling reloadBGVid function.
So I'm just leaving for you the snippet below in hope it helps:
$(document).ready(function() {
$("#mySlick").on('init', function(event) {
$(".carousel-item-background .bgVid").each(function(i, e) {
e.play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid() {
$("video.bgVid").each(function(i, e) {
if (e.paused) e.play();
});
}
});
body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?1">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?2">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?3">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" muted loop preload>
<source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Following is my Javascript and Html Slideshow code which start the slide automatically. Now I'm trying to start this slide when Mouse Hover Over on it. But I can't. Is it possible or how can i do this ?
Html Head Section Javascript Code:
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
Html Body Section Code:
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="#"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide
1"></a>
</div>
<div class="slide">
<a href="#"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide
2"></a>
</div>
</div>
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>
Try naming your function (rather than an anonymous $(function(){ ...) then calling it by name in the onmouseover event of one of your divs (either "slides" or "example" or "containiner")
Are you using SlidesJS plugin?
http://www.slidesjs.com/
I am using the Really Simple slideshow and nowhere in the page does it have a way to click on a slideshow to open in a new window or tab (target="_blank") to certain links.
I have the following, but it still opens in the same page:
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
EDIT
I have tried the following code as suggested by Jigar Savla and yurtdweller but it keeps opening in the same page. I had tried in Chrome and IE.
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
$('a.open_in_new_window').attr('target', '_blank');
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
Edit after answer
OK, I got it!
Thanks to Jigar Savla's code sample, I just added a couple new lines in the Javascript:
// Under if (slide.link_to) ...
if (slide.link_to_new_page) {
$img = $('').append($img);
}
// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'},
And in the html changeddata-link-to=http://google.com to data-link-to-new-page=http://google.com
Now if I just want to use the link and have it open in the same page I use data-link-to, otherwise data-link-to-new-page.
Worked great!!
THANKS!
Well i would have asked you to add a separate class for each anchor tag that you need to have a link to open in new window.
say for example if you have used open_in_new_window as class name to open links in new window than the code would become:
$('a.open_in_new_window').attr('target', '_blank');
hope this helps ;)
You can add
$('a').click(function() {
$(this).attr('target', '_blank');
});
after
$('.rs-slideshow').rsfSlideshow(opts);
this will make all the links on the page open in a new window. If you had classes on the links, we can change the code to target those specific classes and open only the ones you want to select.
Because Really Simple Slideshow generates the HTML for each slide on the fly, just before the transition happens, you’ll need to target the links after they’re generated. You can do this by attaching to the rsPostTransition event:
$('#my-slideshow').bind('rsPostTransition', function() {
$('#my-slideshow a.open_in_new_window').attr('target', '_blank');
});
Or you could use jQuery’s delegated events, which is probably the neater option:
$('#my-slideshow').on('click', 'a.open_in_new_window', function() {
$(this).attr('target', '_blank');
});