We Keep Coding

Why do the slideshows not work (anymore)?

As you can see in my previous question, I've managed to get a slideshow working.
I wanted to put on more slideshows, unfortunately they don't work although I think I've used the same code/design.
And the original slideshow is also not working anymore :(. I got stationary slide shows now.
Can anybody see what I should do in order to get all slideshows working again?
Here's the code:
HTML
`
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div>
<img src="Img4.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img5.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img6.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div>
<img src="Img7.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img8.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img9.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div>
<img src="Img10.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img11.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img12.jpg" height="150px" width="75px">
</div>
</div>`
CSS
/* General settings */
body {
font-family: helvetica;
}
* {
font-size: 100%;
font-family: helvetica;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Starring ads */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowStarringAds {
margin: 80px auto;
position: absolute;
top: 20%;
left: 25%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#SlideshowStarringAds {
height: 300px;
width: 300px;
}
#SlideshowStarringAds > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 1 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd1 {
margin: 80px auto;
position: absolute;
top: 20%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd1 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd1 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 2 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd2 {
margin: 80px auto;
position: absolute;
top: 34%;
right: 39%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd2 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd2 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 3 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd3 {
margin: 80px auto;
position: absolute;
top: 48%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd3 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd3 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
Javascript in HTML head
<!-- Code Javascript belonging to starring ads -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<!-- End of Java script -->
Javascript file
Downloadable from OneDrive

Well, in your javascript, you can add:
var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);
var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
function plusSlides(n, slideshow) {
showSlides(slideshow.currentSlideIndex += n, slideshow);
}
function currentSlide(n, slideshow) {
showSlides(slideshow.currentSlideIndex = n, slideshow);
}
function showSlides(n, slideshow) {
var i;
var slides = slideshow.getElementsByClassName("mySlides");
var dots = slideshow.getElementsByClassName("dot");
if (n > slides.length) {slideshow.currentSlideIndex = 1}
if (n < 1) {slideshow.currentSlideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideshow.currentSlideIndex-1].style.display = "block";
dots[slideshow.currentSlideIndex-1].className += " active";
}
Then in your CSS, you can add:
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Finally in your HTML, you can add:
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img4.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img5.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img6.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img7.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img8.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img9.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img10.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img11.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img12.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
Also, this question is similar to:
How do I make multiple slideshows in the same html document?
Since, that question has an answer to this question.

Unequal div heights

I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Bootstrap 4 Popover when hovering over image

I've tried to look through other threads to see if similar posts have been made. They have but they are for Bootstrap 2 and 3 and the suggestions do not work. Does anyone have suggestions to make it where when you hover over the image thumbnail it will display the popover?
<img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="">
https://jsfiddle.net/umanLb3w/10/

Try this one
just add: data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out." data-trigger="hover" This one for hover popover .
Here is the working demo.
$(function () {
$('[data-toggle="popover"]').popover()
})
.logo {
z-index: 0;
}
h5 {
color: #FDFFFC;
}
h4 {
color: #F1D302
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after, .tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
body {
background-color: #161925;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
h1 {
color: #F1D302;
}
a:hover {
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn {
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
background-color: #161925;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative;
}
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7;
}
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px;
}
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem;
}
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem;
}
::-webkit-scrollbar {
width: 0px;
background-color: #161925;
}
::-webkit-scrollbar-thumb {
background-color: #F1D302;
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
<!-- Latest compiled and minified 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">
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body style="background-color: #161925;">
<div class="row h-100 justify-content-center">
<div class="logo">
<a href="/HTML_Pages/Home.html">
<div clas="col"><img src="/img/logo.png" class="img-fluid" width="200" height="400" alt="Responsive image"> </div>
</a>
</div>
</div>
<div class="container-fluid">
<h1>STEMuli Content</h1>
<div class="row">
<div class="row__inner">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" data-toggle="popover" data-content="Default popover" data-trigger="hover"> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="https://www.cbronline.com/wp-content/uploads/2016/06/what-is-URL-770x503.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/6.png" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row__inner">
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/7.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/8.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/2.png" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/10.png" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/11.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media"> <img class="tile__img" src="/img/corpUpload/12.jpg" alt="" /> </div>
<div class="tile__details">
<div class="tile__title">
<h5></h5>
</div>
</div>
</div>
</div>
</div>
</div>

Create an automatic slider

I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>

If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.

Placing a popup div without affecting other divs positions

I'm having troubles in making an image box(width:100%) similar to the one i have uploaded.
The problem is that: I want an image box which contains diffrent images . They are displayed in "inline-block" attribute with fixed width and height.When I click on one image a div should popup(containing that image and occupying full width.)below the image without affecting the position of other images.
Please tell me how should i place the popup div below the image without affecting other images' position.
Imagebox with different images
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height:auto;
}
#popup img{
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MediaValet</title>
<link rel="stylesheet" type="text/css" href="css/styles3.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
</head>
<body>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
</div>
</div>
</body>
</html>

By making use of each image position top and ``left values we position the popup which has much higher z-index, also on clicking any of these image we take the src value of that image and in inject this value into the #popup img src to load that image into the popup
Updated: now it is "responsive" and the whole set of rows below the popup shift down.
JS: JS Fiddle
var imgs = $('.box img'),
contBox = $('.contentBox'),
popup = $('#popup');
imgs.each(function () {
$(this).on('click', function (evt) {
var $th = $(this),
x = $th.position().left,
y = $th.position().top,
h = this.height,
winW = $(window).width(),
winH = $(window).height(),
src = $th.attr('src'),
a = 0,
last = imgs.last(),
shiftingDown = (winW/winH) * popup.height() - 5 * h,
lastY = last.position().top;
popup.detach();
imgs.each(function (index) {
var thY = $(this).position().top;
if(thY > y){
if(a == 0){
var nextRowFirstItem = $(this).parent();
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block'}).animate({'margin-top' : 0 });
popup.insertBefore(nextRowFirstItem);
$(this).parent().stop().animate({'margin-top' : shiftingDown});
a = 1;
}
}else if( thY == lastY){
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block', 'margin-top':'10px'}).animate({'margin-top' : 0 });
contBox.append(popup);
}else{
imgs.each(function (index) {
$(this).parent().stop().animate({'margin-top' : 0 });
});
}
});
});
});
popup.children('#close').on('click', function (e) {
e.preventDefault();
popup.hide();
imgs.each(function () {
$(this).parent().animate({'margin-top' : "0" });
});
});

Here is what you are expecting. Cheers!
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
height: 100%;
position: relative;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.7);
top: 50%;
margin-top: -25%;
text-align: center;
}
#popup img{
width: 75%;
height: auto;
margin: -25% auto 0 auto;
position: relative;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
Working jsfiddle