We Keep Coding

my carousel items are gone on the webpage but it worked before adding some new things

I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}

jQuery image slider scrolls page to top when changing image

I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>

how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/

Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>

How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}

How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle

change image to another image

im trying to change a image to another image when the user clicks on the options they have of images or colors, i have a picture below to show what im trying to do
this are the links for second images
http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg
http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg
html
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
css:
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

First assign an ID to your T-shirt image:
<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
Then on your black & white buttons assign a data attribute with the URL of the image the t-shirt will be changed to:
<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>
Then use jQuery to change the image src on click:
$('div.inner').click(function() {
var image = $(this).attr('data-image-id');
$('#t-shirt').attr('src', image);
});
Maybe give your div class="inner" a better trigger name with an ID or a more descriptive class name to avoid conflicts.

Here is the simplest way to do it in plain Javascript.
function switchImages(){
if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
}else{
document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
}
}
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>

Here's a simple way without changing anything in your existing code.
<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{
if($(this).find('.rgbColor').data('color') === "000000")
{
$('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
$('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
}
else if($(this).find('.rgbColor').data('color') === "FFFFFF")
{
$('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg");
$('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
}
});
$('.alternativeImage').on('click',function()
{
var smallImageUrl = $(this).attr("src");
var mainImageUrl = $(".img-main img").attr("src");
$(this).attr("src",mainImageUrl);
$(".img-main img").attr("src",smallImageUrl);
$(".img-main img").css("width","300px");
});
});
</script>
Working link : http://jsfiddle.net/b2c5e19h/5/

Add an id to the relevant <a> tag, access it with
document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';
This would just be several lines within a javascript function. Make the button, or whatever the user is clicking, listen and execute this function by adding onclick="yourFunctionsName()
No jquery necessary!

Slider pushed up by side-menu

I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>

The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>