How to reload video in image carousel? - javascript

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!');
});

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

classlist.toggle() with force false still adding class

I have a side navigation bar with a button to toggle showing just the icons or to show the icons and the text. There are multiple different HTML pages that share this nav bar, so I needed to save the nav bar's state for when you switch to each (Dashboard to Items, Contacts to Dashboard, etc). I do this using the follow code:
var navBar = document.querySelector(".side-bar");
var toggle = document.querySelector(".nav-toggle");
window.onload = () =>
{
let isClosed = localStorage.getItem("navState");
navBar.classList.toggle("nav-is-closed", isClosed);
}
toggle.addEventListener("click", () =>
{
let isClosed = navBar.classList.toggle("nav-is-closed");
localStorage.setItem("navState", isClosed);
});
.side-bar {
position: relative;
background-color: var(--default-back-color);
min-width: 200px;
}
.nav-is-closed {
min-width: inherit;
}
.nav-is-closed a h2 {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/css/styles.css">
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght#300&display=swap" rel="stylesheet">
<title>Rucksack</title>
</head>
<body>
<header>
<div>
<img src="resources/images/rucksack.png" alt="">
<h1 class="title">Rucksack</h1>
</div>
<div>
<a class="smaller-icon" href="#"><img src="resources/images/gear.png" alt=""></a>
<img src="resources/images/blue-profile.png" alt="">
</div>
</header>
<main>
<section id="main-section">
<nav class="side-bar">
<a class="selected-nav" href="dashboard"><img src="resources/images/house-icon.png" alt=""><h2>Dashboard</h2></a>
<img src="resources/images/item-icon.png" alt=""><h2>Items</h2>
<hr class="nav-break">
<img src="resources/images/contacts-icon.png" alt=""><h2>Contacts</h2>
<hr class="nav-break">
<img src="resources/images/reports-icon.png" alt=""><h2>Reports</h2>
<div class="nav-toggle"><img src="resources/images/arrow-icon.png" alt=""></div>
</nav>
<div class="content">
<strong>Content</strong>
</div>
</section>
</main>
<script src="shell-controls.js"></script>
</body>
</html>
Everything works fine, except when you move to a new page while the nav is open. It closes even though in window.onload, isClosed is false. As far as I know, toggle with force set to false removes the class, but in this case it's still adding it.
As Kaiido said, isClosed was being pulled from localStorage as a string, which caused toggleClass to think the string of "false" was truthy, therefore still adding the 'nav-is-closed' class. Adding JSON.parse when getting isClosed and adding JSON.stringify when setting isClosed in localStorage solves the problem.

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!

How would I make my code show one image at time?

How would I make my code show one image at time?
<!DOCTYPE html>
<html lang ="en">
<head>
<title> VIS</title>
<meta charset="utf-8"/>
<script type="text/javascript" >
function showImage(id){
if(document.getElementById(id).style.visibility =='visible')
document.getElementById(id).style.visibility = 'hidden';
else
document.getElementById(id).style.visibility= 'visible';
}
</script>
</head>
<body>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
<button onclick="showImage('Pum');">Pumpkins</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Straw"/>
<button onclick="showImage('Straw');">Strawberries</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Ras"/>
<button onclick="showImage('Ras');">Rasberries</button>
</div>
</body>
</html>
My code works fine, but I want it to show one image at time.When I click one of them, it will hide the other .
With my code,can show as many images as I want and as few images. How could I do this , could I send multiple ids as parameters ?
Any help would be great.
Try like this:
First get all the images and hide them , if you want any specific to be shown at load time just ignore that index.after loading you can do your button action as you are trying to.If you want to hide the rest of the visible images on button click then just get the visible image and hide it and show the clicked one.
<!DOCTYPE html>
<html lang ="en">
<head>
<title> VIS</title>
<meta charset="utf-8"/>
</head>
<body>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
<button onclick="showImage('Pum');">Pumpkins</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Straw"/>
<button onclick="showImage('Straw');">Strawberries</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Ras"/>
<button onclick="showImage('Ras');">Rasberries</button>
</div>
</body>
<script type="text/javascript" >
removeVisibility();
function showImage(id){
removeVisibility();
if(document.getElementById(id).style.visibility =='hidden')
document.getElementById(id).style.visibility = 'visible';
}
function removeVisibility(){
var imgs=document.getElementsByTagName('img');//get all the images
for(var i=0;i< imgs.length;i++){
imgs[i].style.visibility= 'hidden'; //hide them
}
}
</script>
</html>

Add bullet navigation to my content slider

I have simple list number slider with fade effect. I need to add bullet navigation to control the slider. Pls help me to do so.
jsFiddle Demo
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slider</title>
<style id="jsbin-css">
.testimonials .quote {
display: none;
}
</style>
</head>
<body>
<div class="testimonials">
<div class="quote">1</div>
<div class="quote">2</div>
<div class="quote">3</div>
<div class="quote">4</div>
<div class="quote">5</div>
<div class="quote">6</div>
<div class="quote">7</div>
<div class="quote">8</div>
<div class="quote">9</div>
<div class="quote">10</div>
</div>
<script>
$(function () {
(function anim(num, delay) {
$('.testimonials .quote')
.slice(0,num)
.fadeIn()
.delay(delay)
.fadeOut()
.promise()
.done(function () {
$('.testimonials').append(this);
anim(num, delay);
});
}(2, 2000));
});
</script>
</body>
</html>

Categories

Resources