Manipulate a slider with next and previous - javascript

Can this slider be manipulated so that by clicking on a button it'll go to the previous item, and next to the next item?
Currently it's possible to move between dividers through links ("1 2 3 4 5") in the first divider, and go back to the first divider through a "back" link on each divider.
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
1
2
3
4
5
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">back</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">back</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">back</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JavaScript:
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}


You need to remove nav links from items and create separated nav panel with buttons.
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
</div>
This solution is not finished. It doesn't cosider window resizing.

Related

Dynamic Image Modal with active state

I have image folders that expand when clicked on to view the whole album. I've been able to make the first album work, but I cant seem to get the active state to carry over to the other albums.
My JavaScript knowledge is quite limited so I'm unsure where I'm going wrong with this, but the goal here is to have a grid showcasing thumbnails for different image collections and when a collection is clicked on, the modal will popup and dynamically display the collection of images that was clicked on.
const modal = document.querySelector(".modal");
const buttons = document.querySelectorAll("[data-carousel-button]");
const carousel = document.querySelector(".carousel");
const closeButton = document.querySelector(".close");
const gridImages = document.querySelectorAll(".grid-img img");
const slide = document.querySelector(".slide");
const blueLotusFineArt = document.querySelector(".one");
const blueLotusModal = document.querySelector(".blue-lotus");
const greenWomenFineArt = document.querySelector(".two");
const greenWomenModal = document.querySelector(".green-women");
buttons.forEach((button) => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1;
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]");
const activeSlide = slides.querySelector("[data-active]");
let newIndex = [...slides.children].indexOf(activeSlide) + offset;
if (newIndex < 0) newIndex = slides.children.length - 1;
if (newIndex >= slides.children.length) newIndex = 0;
slides.children[newIndex].dataset.active = true;
delete activeSlide.dataset.active;
});
});
// select image from grid
// only display selected gallery
gridImages.forEach((gridImage) => {
gridImage.addEventListener("click", () => {
modal.classList.add("open");
closeButton.classList.add("open");
carousel.style.display = "block";
});
});
blueLotusFineArt.addEventListener("click", () => {
blueLotusModal.style.display = "block";
});
greenWomenFineArt.addEventListener("click", () => {
greenWomenModal.style.display = "block";
slide.style.opacity = "1";
});
closeButton.addEventListener("click", () => {
carousel.style.display = "none";
closeButton.classList.remove("open");
modal.classList.remove("open");
blueLotusModal.style.display = "none";
greenWomenModal.style.display = "none";
});
section {
min-height: 100vh;
}
img,
picture {
max-width: 100%;
display: block;
}
.flex {
display: flex;
gap: 4rem;
}
#fine-art {
position: relative;
z-index: 2;
background-color: var(--clr-primary);
min-height: auto;
}
.container {
padding-inline: 4em;
margin-inline: auto;
max-width: 120rem;
}
.wrapper {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 2rem;
padding: 4rem 0;
}
.grid {
display: grid;
gap: var(--gap, 1rem);
}
.modal {
opacity: 0;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(43, 43, 43, 0.5);
transition: all 300ms ease-in-out;
pointer-events: none;
backdrop-filter: blur(10px);
display: grid;
place-items: center;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.close {
position: fixed;
right: 32px;
top: 50px;
width: 50px;
height: 32px;
opacity: 0;
z-index: 20;
pointer-events: none;
transition: all 300ms ease-in-out;
cursor: pointer;
}
.close.open {
opacity: 1;
pointer-events: all;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 50px;
width: 5px;
background-color: var(--clr-primary);
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.blue-lotus,
.green-women {
display: none;
pointer-events: none;
}
.carousel {
width: 100vw;
height: 80vh;
position: absolute;
z-index: 10;
display: none;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 4px;
}
.slide[data-active] {
opacity: 1;
transition-delay: 0ms;
}
.carousel-button {
position: absolute;
background: none;
border: none;
font-size: 4rem;
top: 50%;
z-index: 11;
transform: translateY(-50%);
color: rgba(241, 242, 245, 0.5);
cursor: pointer;
border-radius: 0.25rem;
padding: 0 0.5rem;
background-color: rgba(43, 43, 43, 0.1);
}
.carousel-button:hover,
.carousel-button:focus {
color: rgba(241, 242, 245, 1);
background-color: rgba(43, 43, 43, 0.2);
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 1rem;
}
<section id="fine-art">
<div class="container fine-art">
<div class="wrapper grid">
<div class="grid-img one">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Blue Lotus</p>
</div>
<div class="grid-img two">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Green Women</p>
</div>
<div class="grid-img three">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Studio</p>
</div>
<div class="grid-img four">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Starlet</p>
</div>
<div class="grid-img five">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Portraits</p>
</div>
<div class="grid-img six">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Chameleon</p>
</div>
<div class="grid-img seven">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>De Kelders</p>
</div>
<div class="grid-img eight">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Elementals</p>
</div>
<div class="grid-img nine">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Mosaic</p>
</div>
</div>
</div>
</section>
<a class="close"></a>
<div class="modal">
<div class="carousel" data-carousel>
<button class="carousel-button next" data-carousel-button="next">
⇨
</button>
<button class="carousel-button prev" data-carousel-button="prev">
⇦
</button>
<ul class="blue-lotus" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 4"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 5"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 6"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
<ul class="green-women" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Green Women 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
</div>
</div>

Center div with items laid out using grid on mobile version

I have the following code:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
On the desktop version, it looks okay, but if it is rendered on narrower screen, then you can see it is not horizontally centered on the page properly. What should I change in my CSS to center the div on the page?

Using flexbox allows you to automatically wrap the items. (See CSS under your “Irrelevant styling” comment.)
Using grid could seem to be good idea, because it is “modern”, but using grid usually makes sense when you want to create layout with multiple item types. Flexboxes are typically useful when you want to lay out something into columns or rows automatically without setting fixed column count.
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
<script>
function seeMore() {
window.location("https://inderatech.com/index.html")
}
</script>

How to get the images to be the same size using Isotope JS

I am using Isotope JS and I am trying to get an evenly spaced, proportional gallery layout but I am not sure what is wrong. My code isn't cooperating with isotope. I would be very grateful if someone could help me figure out what I am doing wrong.
I created a codepen if that would help as well: https://codepen.io/jaytb95/pen/vYxMGqP
$(document).ready(function() {
$grid = $('.grid').isotope({
filter: '*',
itemSelector: '.grid-item',
layoutMode: 'fitRows',
percentPosition: true
});
$filters = $('.list');
$filters.click(function() {
$value = $(this).attr('data-filter');
if ($value == 'all') {
$grid.isotope({ filter: '*' });
} else {
$grid.isotope({ filter: '.' + $value });
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: crimson;
color: white;
font-family: 'Calibri',sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>

You should initialize Isotope after all the images have loaded. This means that you also have to include the imagesLoaded library in your code.
Also, to make the images proportional and evenly spaced, set the width of each .grid-item class to 50%, set the width of each image to calc(100% - 0.25rem), and change the layout mode to masonry. Your "image gallery" should work just fine after this:
$(document).ready(function() {
$grid = $(".grid").imagesLoaded(function() {
$grid.isotope({
filter: "*",
itemSelector: ".grid-item",
layoutMode: "masonry",
percentPosition: true
});
});
$filters = $(".list");
$filters.click(function() {
$value = $(this).attr("data-filter");
if ($value == "all") {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "*" });
});
} else {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "." + $value });
});
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: #dc143c; /* crimson */
color: #fff; /* white */
font-family: "Calibri", sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vw;
}
.grid-item {
width: 50%;
}
.grid-item img {
object-fit: cover;
-o-object-fit: cover;
width: calc(100% - 0.25rem);
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4.1.4/imagesloaded.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
</div>
</div>

Icon appears when selecting an image

I'm working on the palette project and trying to appear icon when selecting an image.
Icon is now placed next to beige, but I'm struggling to make it disappear when not selecting an image.
Below images describe how I imagine for this project.
Please help.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<i class="material-icons more-icon">more_horiz</i>
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>

1st you can add same event to different selector like this:
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item") seperate by ,
2nd I check if the clicked one already has class means it is active already, then I deactive all. If not active yet, deactive all then active this one.
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition: all 0.3s;
transform: translateX(0);
z-index: 1;
}
[data-page='0'] .board-nav-indicator {
transform: translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform: translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform: translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
.board-pages {
position: absolute;
top: 75px;
left: 0;
width: 100%;
height: calc(100% - 75px);
overflow: hidden;
}
.board-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s;
transform: translateX(0);
overflow: auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex: 0 1 25%;
padding: 6px;
}
.grid-item-theme {
flex: 0 1 25%;
padding: 6px;
}
.grid-row {
overflow-x: auto;
white-space: nowrap;
}
.grid-row .grid-item {
display: inline-block;
max-width: 110px;
}
.grid-item-content {
text-align: left;
font-family: "mr-eaves-modern";
font-size: 0.3rem;
text-transform: uppercase;
}
.pick-palette img {
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<i class="material-icons more-icon">more_horiz</i>
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script>
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
</script>

Slider bad shifting

I have this slider that i'm using, whenever i click the next or previous buttons it shifts in a way covering some elements of my website. I believe the problem in the #mask and i tried to change a bit in it but without any difference, any idea on if it's causing the problem or something else? and any solution?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
body {
margin: 0;
}
#wrapper {
width: 100%;
height: 350px;
/*position: absolute;*/
top: 0;
left: 0;
background-color: white;
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<h1><p id="prev"><</p></h1>
<h1><p id="next">></p></h1>
</div>
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var newItem = 0;
var itemCount = $('.item').length;
function shift(direction) {
var $mask = $('#mask'),
$items = $('.item'),
currentItem = $mask.data('currentItem');
if (currentItem === undefined) {
currentItem = 0;
}
$mask.data('currentItem', newItem).animate({
marginLeft: -newItem * $items.eq(0).width()
});
}
$('#prev').click(function () {
if (newItem === 0) {
newItem = itemCount - 1;
} else {
newItem--;
}
return shift();
});
$('#next').click(function () {
if (newItem === itemCount - 1) {
newItem = 0;
} else {
newItem++;
}
return shift();
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
$('#wrapper, .item').css({
width: width,
height: height
});
}
$(window).resize(function () {
resizePanel();
});
resizePanel();
});
</script>
</body>
</html>
JSFIDDLE: https://jsfiddle.net/ew98y5fv/

I have modified you html:
<body>
<div id="wrapper">
<div id="slider-container">
<div id="nav">
<p id="prev"><</p>
<p id="next">></p>
</div>
<div class="slider-view-area">
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the css:
body {
margin: 0;
}
#wrapper {
background-color: blue;
padding: 20px 0;
}
#slider-container {
padding: 20px 50px;
height: 350px;
background-color: white;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 20px;
font-size: 30px;
}
#next {
right: 20px;
font-size: 30px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
I removed h1 tags around your navigation elements because you should not use header tags for display changes like making the icons look bigger. For that you should use css. h1 tags will be semantically incorrect in this case, because a navigation element is not a primary header.
I have just gone for a quick fix. But its the direction you should take if you want to make the slider into an independent component in your page.
Here is the jsfiddle: https://jsfiddle.net/ew98y5fv/3/

Categories

Resources