I'm super new at this so please be gentle.
I'm trying to use the bootstrap carousel plugin and have a different div section display when each slide changes. I found a good example but unfortunately I can't figure out how to get it to pause.
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<style>
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
}
</style>
<title>testapp</title>
</head>
<body>
<div id="msg"></div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft_gray.png" />
</div>
<div class="item">
<img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
</div>
<div class="item">
<img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="row">
<div class="offset2">
<div>Microsoft: *** index 0 ***</div>
<div>Google: *** index 1 ***</div>
<div>Google: *** index 2 ***</div>
</div>
</div>
</body>
</html>
JS
function msg(m) {
$("#msg").text(m);
}
$('#myCarousel').carousel({
interval: 5000
});
var carouselTexts = $(".row .offset2 div");
$('#myCarousel').on('slid', function(event) {
var idx = $(event.target).find('.carousel-inner .active').index();
carouselTexts.hide().eq(idx).show();
}).trigger('slid');
http://jsfiddle.net/ymwL5/2/
When I add "Pause: "hover" below the interval: 5000 line the Divs stop to rotate and the hide section completely breaks.
Any help would be appreciated.
The carousel should pause on hover by default so you shouldn't need that option. I think you are missing a comma after the "interval: 5000" option. Try:
interval: 5000,
pause: "hover"
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.
I have a bootstrap4 `card' which is hidden and I want to display it with slide right to left slow animation on button click. Below is the markup
<div class="card" id="setup" style="display:none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
Below is click event
$("#Finalize").click(function () {
$('#setup).show();
$("#setup").animate({ left: '0' }, 'slow');
});
With the above jquery code, I am just able to display the card, its animation effect is not working? What's wrong and how to make it work?
This worked for me:
$(function(){
$("#Finalize").click(function () {
$(".cardcontainer").show();
var left = $('#card').offset().left;
$("#card").css({left:left}).animate({"left":"0px"}, "slow");
});
});
.cardcontainer{
position:relative;
height: 220px;
display:none
}
.card{
position:absolute !important;
width:200px;
right:0px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="cardcontainer">
<div class="card" id="card">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
</div>
<div>
<a id="Finalize" href="#" class="btn btn-primary">Go somewhere</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Ok, here is the html:
<div class="card animatable" id="setup" style="display: none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
here is the CSS (we need to define a width for the card. I just put 500px, you can make it however big you want it obviously)
#setup {
width: 500px;
}
And here is the javascript.
$("#Finalize").click(function () {
if ($('#setup').hasClass('animatable')) {
$('#setup').show();
$('#setup').css('margin-left', $(window).width());
$("#setup").animate({ right: "+=" + $(window).width()}, 'slow');
$('#setup').removeClass('animatable');
}
});
Note I know you said you didn't want a margin. According to the HTML code you posted, the card will appear on the left side of the screen with the DOM loads. So if you run the animation, it will fly off the screen because it's going to move to the left when it's already placed at the left. So we need to move it to the right, hence my margin-left. Now if you absolutely cannot have a margin, you can give the card an absolute position, and just left it over to the right side of the screen. Also, we need to give it a width so that the card won't crumple up when we move it to the right side of the screen.
I hope this helps!
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
I saw this fish eye effect rendering js and tried to use it in a site HTML.It works fine but i am unable to change the space between the items. Does anybody know how to change the space between the items?
This is the Html/js code :
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 75,
proximity: 90,
halign : 'center'
}
)
}
);
</script><div id="topbutton-container">
<div style="float:left; width:17px; margin:0px;"><img src="images/topbutton-left.jpg" /></div>
<div id="topbutton" align="center"><div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="index.html"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="projects.html"><img src="images/projects.png" alt="contact" /><span>Projects</span></a>
<a class="dock-item" href="course.html"><img src="images/course.png" alt="portfolio" /><span>Course</span></a>
<a class="dock-item" href="testimonial.html"><img src="images/music.png" alt="music" /><span>Testimonial</span></a>
<a class="dock-item" href="latest-updates.html"><img src="images/history.png" alt="history" /><span> Latest Updates</span></a>
<a class="dock-item" href="contact.html"><img src="images/contact.png" alt="calendar" /><span>Contact</span></a>
</div>
</div></div>
<div style="float:left; width:17px; margin-top:0px;"><img src="images/tobutton-right.jpg" /></div>
</div>
do you included all the supporting files?
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/interface.js"></script>
<link type="text/css" href="css/interface-fisheye.css" rel="stylesheet">