We Keep Coding

How can I start an image animation from the beginning when it appears in my slider?

I have made a slider using swiper.js, I want the gif to start animating from the beginning whenever we go to that slide.
I tried it using ajax load but the gif ain't reloading!
swiper.on('slideChange', function() {
$('#ts .gif').load(document.URL + '#ts .gif');
});
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex" id="da">
hello
</div>
<div class="swiper-slide" id="ts">
<div>
<h3><strong>Digital Agency Support</strong></h3>
</div>
<div class="gif">
<img src="dm.gif" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

Sadly there is no way to interact with gifs as far as I know. One way to achieve what you want is to replace the gif with a static image, as long as it is not in focus. Something like:
swiper.on('slideChange', function() {
if (swiper.activeIndex == 1 ) {
document.getElementById("gif").src = "gif.gif";
}else{
document.getElementById("gif").src = "image.png";
}
});
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex" id="da">
hello
</div>
<div class="swiper-slide" id="ts">
<div>
<h3><strong>Digital Agency Support</strong></h3>
</div>
<div class="gif">
<img id="gif" src="image.gif" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

JS Delete div content and write new code

I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.

If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Carousel loading failed

I'm trying to call bootstrap carousel slider from a separate html file but it doesn't work. Only the first image appears and other images don't slide. The carousel slider is in a file called home.html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
I'm calling it in my index.html file with a div tag:
<div class="products"></div>
And this is the Javascript code for the carousel:
$('.carousel').carousel({
interval: 3500
});
$(document).ready(function() {
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e){
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
Any help please!

Since you are using the jQuery load() you should use the Callback Function, run your code only after the html loaded.
(also make sure your path are correct)
Read more here: http://api.jquery.com/load/
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
<div class="products">
</div>

Thumbnail with active class in javascript

First of all I don't know nothing about javascript.
I have this slider:
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div><!-- Carousel nav -->
</div>
</div>
</div><!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
And with this javascript, they works:
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
But I would like to make the thumbnail with an active class, how can I made this with javascript // jquery?
Thanks a lot to help me!

Get all of the thumbnail images with $('.thumbnail img');, then when you click on one of the #carousel-selector-* elements, remove the .active class from all other thumbnails and add it to the one inside of the link you clicked on.
var $imgs = $('.thumbnail img');
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id"),
$img = $(this).find('img');
$imgs.not($img).removeClass('active');
$img.addClass('active');
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div>
<!-- Carousel nav -->
</div>
</div>
</div>
<!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>

when i am scrolling up, the navbar has to stick at top position and don't hide by following images of navbar

I make a code for sticking navbar at top position when i scroll down. But the problem is now when i scroll down the set fixed at top as i code. But the images which is following that navbar that hides navbar.
BEFORE SCROLLING
AFTER Scrolling
Lets see my code
<div class="container">
<h1>Mohamed faisal</h1>
<p>Welcome to home page</p>
</div>
<div class="row" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="f1.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f3.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="f4.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
$("document").ready(function ($) {
var offsets = document.getElementById('rows').getBoundingClientRect();
var topoffsets = offsets.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > topoffsets) {
$("#rows").css({ top: 0, position: 'fixed' });
} else {
$("#rows").css({ top: '', position: '' });
}
});
});

You should be able to fix this with a z-index on your navbar div. Add another class to your navigation div.
<div class="row navbar" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
Then add the class to your css with a z-index of 99999.
.navbar {
z-index: 99999;
}

You need to use z-index to up the navbar layer.
.navbarclass {
z-index: 9999;
}

Assuming that div#rows is your header here. You can apply z-index. I don't recommend the idea of 99999999 when dealing with large amount of z-index'd elements on the page. you may need to increase according to the slider's index; inspect the slider's z-index property
#rows {
z-index: 1004;
}

Try using z-index css property with high value on your navbar div.
Code
.navbar {
z-index: 99999 !important;
}