Develop Reference

Mouse Hover on Slider not working to show another image

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.

How to reload video in image carousel?

I have an image carousel and i set a video inside of it, first time video working normally it stay at the end of video and change to another slide,but second time the video is not going to play again from beginning it stay at the end of time it is in pause i should play it by clicking the start button. How can i fix this problem as every time video start from beginning when it is turn of video slide? I will be thankful if somebody help.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner{
width: 100%;
height: 760px;
}
.forvideo{
width: 100%;
height: 760px;
object-fit: cover;
z-index: -100;
}
.carouselplace{
margin-top: 9%;
}
</style>
</head>
<body>
<div class="container carouselplace">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="Pic/Sample Movie & img/3.jpg" alt="Picture" style="width:100%;">
</div>
<div class="item">
<video autoplay muted controls="controls" class="forvideo">
<source src="Pic/Sample Movie & img/Samplemovie.mp4" type="video/mp4">
</video>
</div>
<div class="item">
<img src="Pic/Sample Movie & img/4.jpg" alt="Picture" style="width:100%;">
</div>
</div>
</div>
</div>
<script>
$('.carousel').carousel({
interval: 3000
})
$('video').on('play', function (e) {
$("#myCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
$("#myCarousel").carousel();
});
</Script>
</body>
</html>

Use slid.bs.carousel slide change event it event.target will hold the destination slide which just got shown
$("#myCarousel").on('slid.bs.carousel', function(e){
var vid = $(e.target).find('video')
if(vid.length >0){
vid[0].load();
}
alert('The carousel has finished sliding from one item to another!');
});

Slide a hidden bootstrap card from right to left on button click

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!

Using flexslider to create a responsive, full width, fixed-height, carousel image-slider

I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.
That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does.
However, I want my slider to be of lighter weight/ greater simplicity.
Here is my code thus far:
(here is the head)
<head>
<!-- Flex Slider API JS -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 360,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<!-- End of FlexsliderAPI JS -->
</head>
Here is the body:
<body>
<!-- Placement of Flex Slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../../local/images/slide1.JPG" />
</li>
<li>
<img src="../../local/images/slide2.JPG"/>
</li>
<li>
<img src="../../local/images/slide3.JPG" />
</li>
<li>
<img src="../../local/images/slide 5.jpg" />
</li>
</ul>
</div>
</div>
<!-- End placement of FlexSlider -->
</body>
And here is the CSS:
.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}
Thanks a ton for the help. - Cody

not snapping to height bounds
I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.
not displaying navigation
Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
The configuration offercard uses is:
slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"< PREV",
nextText:"NEXT >",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0

Bootstrap Carousel pause

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"