Skip to content

Instantly share code, notes, and snippets.

@kkasaei

kkasaei/Version 2

Last active December 7, 2023 20:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kkasaei/c014f519cae4d0f7a40a82cadb317c35 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kkasaei/c014f519cae4d0f7a40a82cadb317c35 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kkasaei revised this gist Dec 7, 2023. 1 changed file with 197 additions and 0 deletions.
    197 changes: 197 additions & 0 deletions Version 3
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,197 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow</title>
    <style>
    .card {
    height: 200px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 40px;
    margin: 0;
    flex: 33% 0 0;

    }

    .cards img {
    width: 100%;
    object-fit: cover;
    }

    .cards-wrapper {
    display: flex;
    transition: ease 0.5s;
    }

    .display-area {
    width: 100%;
    overflow-x: hidden;
    margin: auto;
    position: relative;
    }

    .dots-wrapper {
    visibility: hidden;
    display: none;
    }

    .dot {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 50%;
    outline: none;
    }

    .dot:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .dot.active {
    background: rgba(0, 0, 0, 0.5);
    }

    .arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    }

    .arrow {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: ease 0.5s;
    border-radius: 50%;
    }

    .arrow:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .arrow-left {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    left: -10px;
    }

    .arrow-right {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    right: -5px;
    }


    @media (max-width: 768px) {
    .card {
    flex: 100% 0 0;
    }

    .arrows {
    display: none;
    visibility: hidden;
    }

    .dots-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
    visibility: visible;
    }

    }
    </style>
    </head>

    <body>
    <div class="display-area">
    <div class="arrows">
    <div class="arrow arrow-left">PREV</div>
    <div class="arrow arrow-right">NEXT</div>
    </div>
    <div class="cards-wrapper">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    </div>
    </div>
    <div class="dots-wrapper">
    <button class="dot active"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    </div>
    <script>

    function getDotsLength(dots) {
    let dotsLength = dots.length;
    if (window.innerWidth > 994) {
    dotsLength = 2;
    } else {
    dotsLength = dots.length
    }
    return dotsLength;
    }

    // Reviews Slider
    document.addEventListener('DOMContentLoaded', () => {
    const sliderWrapper = document.querySelector('.cards-wrapper');
    const dots = document.querySelectorAll('.dot');
    let dotsLength = getDotsLength(dots);
    let activeDotNum = 0;


    window.addEventListener('resize', () => {
    dotsLength = getDotsLength(dots);
    });


    const shiftSlide = (num) => {
    let displayArea = sliderWrapper.parentElement.clientWidth;
    sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
    dots[activeDotNum].classList.remove('active');
    dots[num].classList.add('active');
    activeDotNum = num;
    };

    dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
    if (idx !== activeDotNum) {
    shiftSlide(idx);
    }
    });
    });

    document.querySelectorAll('.arrow').forEach(arrow => {
    arrow.addEventListener('click', (e) => {
    let isPrevArrow = e.target.classList.contains('arrow-left');
    if (isPrevArrow && activeDotNum > 0) {
    shiftSlide(activeDotNum - 1);
    } else if (!isPrevArrow && activeDotNum < dotsLength - 1) {
    shiftSlide(activeDotNum + 1);
    }
    });
    });
    });
    </script>
    </body>

    </html>
  2. kkasaei revised this gist Dec 6, 2023. 1 changed file with 181 additions and 0 deletions.
    181 changes: 181 additions & 0 deletions Version 2
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,181 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow</title>
    <style>
    .card {
    height: 200px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 40px;
    margin: 0;
    flex: 33% 0 0;

    }

    .cards img {
    width: 100%;
    object-fit: cover;
    }

    .cards-wrapper {
    display: flex;
    transition: ease 0.5s;
    }

    .display-area {
    width: 100%;
    overflow-x: hidden;
    margin: auto;
    position: relative;
    }

    .dots-wrapper {
    visibility: hidden;
    display: none;
    }

    .dot {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 50%;
    outline: none;
    }

    .dot:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .dot.active {
    background: rgba(0, 0, 0, 0.5);
    }

    .arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    }

    .arrow {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: ease 0.5s;
    border-radius: 50%;
    }

    .arrow:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .arrow-left {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    left: -10px;
    }

    .arrow-right {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    right: -5px;
    }


    @media (max-width: 768px) {
    .card {
    flex: 100% 0 0;
    }
    .arrows {
    display: none;
    visibility: hidden;
    }

    .dots-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
    visibility: visible;
    }

    }
    </style>
    </head>

    <body>
    <div class="display-area">
    <div class="arrows">
    <div class="arrow arrow-left">PREV</div>
    <div class="arrow arrow-right">NEXT</div>
    </div>
    <div class="cards-wrapper">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    </div>
    </div>
    <div class="dots-wrapper">
    <button class="dot active"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    <button class="dot"></button>
    </div>
    <script>
    // Reviews Slider
    document.addEventListener('DOMContentLoaded', () => {
    const sliderWrapper = document.querySelector('.cards-wrapper');
    const dots = document.querySelectorAll('.dot');
    let activeDotNum = 0;

    const shiftSlide = (num) => {
    console.log(num)
    let displayArea = sliderWrapper.parentElement.clientWidth;
    console.log(displayArea)
    sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
    console.log(-displayArea * num)
    dots[activeDotNum].classList.remove('active');
    dots[num].classList.add('active');
    activeDotNum = num;
    };

    dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
    if (idx !== activeDotNum) {
    shiftSlide(idx);
    }
    });
    });

    document.querySelectorAll('.arrow').forEach(arrow => {
    arrow.addEventListener('click', (e) => {
    let isPrevArrow = e.target.classList.contains('arrow-left');
    if (isPrevArrow && activeDotNum > 0) {
    shiftSlide(activeDotNum - 1);
    } else if (!isPrevArrow && activeDotNum < dots.length - 1) {
    shiftSlide(activeDotNum + 1);
    }
    });
    });
    });
    </script>
    </body>

    </html>
  3. kkasaei revised this gist Nov 13, 2023. No changes.
  4. kkasaei revised this gist Nov 13, 2023. 1 changed file with 30 additions and 95 deletions.
    125 changes: 30 additions & 95 deletions css-slider
    View file
    Original file line number Diff line number Diff line change
    @@ -116,105 +116,40 @@
    <button class="dot active"></button>
    <button class="dot"></button>
    </div>
    <script>
    // In HTML, .display-area has the width of 4 cards = 880px. Each card is 200px width and margin set to 10px.
    // .display-area has a .cards-wrapper which contains all the cards. .cards-wrapper is set to display flex.
    // .display-area has overflow hidden to hide the portion of cards-wrapper which extends beyond the container's width.

    const sliderWrapper = document.querySelector('.cards-wrapper');
    // console.log(wrapper.clientWidth);

    // grab the dots
    const dots = document.querySelectorAll('.dot');
    // the default active dot num which is array[0]
    let activeDotNum = 0;

    dots.forEach((dot, idx) => {
    // number each dot according to array index
    dot.setAttribute('data-num', idx);

    // add a click event listener to each dot
    dot.addEventListener('click', (e) => {

    let clickedDotNum = e.target.dataset.num;
    // console.log(clickedDotNum);
    // if the dot clicked is already active, then do nothing
    if (clickedDotNum == activeDotNum) {
    // console.log('active');
    return;
    }
    else {
    // console.log('not active');
    // shift the wrapper
    let displayArea = sliderWrapper.parentElement.clientWidth;
    // let pixels = -wrapper.clientWidth * clickedDotNum;
    let pixels = -displayArea * clickedDotNum
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the clicked dot
    dots[clickedDotNum].classList.add('active');
    // now set the active dot number to the clicked dot;
    activeDotNum = clickedDotNum;
    }

    });
    });


    // grab the arrows
    const arrows = document.querySelectorAll('.arrow');
    // add a click event listener to each arrow

    arrows.forEach((arrow, index) => {
    arrow.addEventListener('click', (e) => {
    console.log(e.target);

    // if the left arrow is clicked

    isPrevArrow = e.target.classList.contains('arrow-left');

    if (isPrevArrow) {
    // if the active dot is the first dot, then do nothing
    if (activeDotNum == 0) {
    return;
    }
    else {
    // if the active dot is not the first dot, then shift the wrapper to the left
    let displayArea = sliderWrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum - 1);
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the previous dot
    dots[activeDotNum - 1].classList.add('active');
    // now set the active dot number to the previous dot;
    activeDotNum = activeDotNum - 1;
    <script>
    // Reviews Slider
    document.addEventListener('DOMContentLoaded', () => {
    const sliderWrapper = document.querySelector('.cards-wrapper');
    const dots = document.querySelectorAll('.dot');
    let activeDotNum = 0;

    const shiftSlide = (num) => {
    let displayArea = sliderWrapper.parentElement.clientWidth;
    sliderWrapper.style.transform = `translateX(${-displayArea * num}px)`;
    dots[activeDotNum].classList.remove('active');
    dots[num].classList.add('active');
    activeDotNum = num;
    };

    dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
    if (idx !== activeDotNum) {
    shiftSlide(idx);
    }
    } else {
    // if the right arrow is clicked
    });
    });

    // if the active dot is the last dot, then do nothing
    if (activeDotNum == dots.length - 1) {
    return;
    }
    else {
    // if the active dot is not the last dot, then shift the wrapper to the right
    let displayArea = sliderWrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum + 1);
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the next dot
    dots[activeDotNum + 1].classList.add('active');
    // now set the active dot number to the next dot;
    activeDotNum = activeDotNum + 1;
    document.querySelectorAll('.arrow').forEach(arrow => {
    arrow.addEventListener('click', (e) => {
    let isPrevArrow = e.target.classList.contains('arrow-left');
    if (isPrevArrow && activeDotNum > 0) {
    shiftSlide(activeDotNum - 1);
    } else if (!isPrevArrow && activeDotNum < dots.length - 1) {
    shiftSlide(activeDotNum + 1);
    }
    }

    });
    });
    })

    });
    </script>
    </body>

  5. kkasaei revised this gist Nov 13, 2023. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions css-slider
    View file
    Original file line number Diff line number Diff line change
    @@ -121,7 +121,7 @@
    // .display-area has a .cards-wrapper which contains all the cards. .cards-wrapper is set to display flex.
    // .display-area has overflow hidden to hide the portion of cards-wrapper which extends beyond the container's width.

    const wrapper = document.querySelector('.cards-wrapper');
    const sliderWrapper = document.querySelector('.cards-wrapper');
    // console.log(wrapper.clientWidth);

    // grab the dots
    @@ -146,10 +146,10 @@
    else {
    // console.log('not active');
    // shift the wrapper
    let displayArea = wrapper.parentElement.clientWidth;
    let displayArea = sliderWrapper.parentElement.clientWidth;
    // let pixels = -wrapper.clientWidth * clickedDotNum;
    let pixels = -displayArea * clickedDotNum
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the clicked dot
    @@ -181,9 +181,9 @@
    }
    else {
    // if the active dot is not the first dot, then shift the wrapper to the left
    let displayArea = wrapper.parentElement.clientWidth;
    let displayArea = sliderWrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum - 1);
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the previous dot
    @@ -200,9 +200,9 @@
    }
    else {
    // if the active dot is not the last dot, then shift the wrapper to the right
    let displayArea = wrapper.parentElement.clientWidth;
    let displayArea = sliderWrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum + 1);
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    sliderWrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the next dot
  6. kkasaei created this gist Nov 13, 2023.
    221 changes: 221 additions & 0 deletions css-slider
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,221 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow</title>
    <style>
    .card {
    height: 200px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 40px;
    margin: 10px;
    flex: 33% 0 0;

    }

    .cards img {
    width: 100%;
    object-fit: cover;
    }

    .cards-wrapper {
    display: flex;
    transition: ease 0.5s;
    }

    .display-area {
    width: 100%;
    overflow-x: hidden;
    margin: auto;
    position: relative;
    }

    .dots-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
    }

    .dot {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 50%;
    outline: none;
    }

    .dot:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .dot.active {
    background: rgba(0, 0, 0, 0.5);
    }

    .arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    }

    .arrow {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: ease 0.5s;
    border-radius: 50%;
    }

    .arrow:hover {
    background: rgba(0, 0, 0, 0.3);
    }

    .arrow-left {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    left: -10px;
    }

    .arrow-right {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    right: -5px;
    }
    </style>
    </head>

    <body>
    <div class="display-area">
    <div class="arrows">
    <div class="arrow arrow-left">PREV</div>
    <div class="arrow arrow-right">NEXT</div>
    </div>
    <div class="cards-wrapper">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    </div>
    </div>
    <div class="dots-wrapper">
    <button class="dot active"></button>
    <button class="dot"></button>
    </div>
    <script>
    // In HTML, .display-area has the width of 4 cards = 880px. Each card is 200px width and margin set to 10px.
    // .display-area has a .cards-wrapper which contains all the cards. .cards-wrapper is set to display flex.
    // .display-area has overflow hidden to hide the portion of cards-wrapper which extends beyond the container's width.

    const wrapper = document.querySelector('.cards-wrapper');
    // console.log(wrapper.clientWidth);

    // grab the dots
    const dots = document.querySelectorAll('.dot');
    // the default active dot num which is array[0]
    let activeDotNum = 0;

    dots.forEach((dot, idx) => {
    // number each dot according to array index
    dot.setAttribute('data-num', idx);

    // add a click event listener to each dot
    dot.addEventListener('click', (e) => {

    let clickedDotNum = e.target.dataset.num;
    // console.log(clickedDotNum);
    // if the dot clicked is already active, then do nothing
    if (clickedDotNum == activeDotNum) {
    // console.log('active');
    return;
    }
    else {
    // console.log('not active');
    // shift the wrapper
    let displayArea = wrapper.parentElement.clientWidth;
    // let pixels = -wrapper.clientWidth * clickedDotNum;
    let pixels = -displayArea * clickedDotNum
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the clicked dot
    dots[clickedDotNum].classList.add('active');
    // now set the active dot number to the clicked dot;
    activeDotNum = clickedDotNum;
    }

    });
    });


    // grab the arrows
    const arrows = document.querySelectorAll('.arrow');
    // add a click event listener to each arrow

    arrows.forEach((arrow, index) => {
    arrow.addEventListener('click', (e) => {
    console.log(e.target);

    // if the left arrow is clicked

    isPrevArrow = e.target.classList.contains('arrow-left');

    if (isPrevArrow) {
    // if the active dot is the first dot, then do nothing
    if (activeDotNum == 0) {
    return;
    }
    else {
    // if the active dot is not the first dot, then shift the wrapper to the left
    let displayArea = wrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum - 1);
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the previous dot
    dots[activeDotNum - 1].classList.add('active');
    // now set the active dot number to the previous dot;
    activeDotNum = activeDotNum - 1;
    }
    } else {
    // if the right arrow is clicked

    // if the active dot is the last dot, then do nothing
    if (activeDotNum == dots.length - 1) {
    return;
    }
    else {
    // if the active dot is not the last dot, then shift the wrapper to the right
    let displayArea = wrapper.parentElement.clientWidth;
    let pixels = -displayArea * (activeDotNum + 1);
    wrapper.style.transform = 'translateX(' + pixels + 'px)';
    // remove the active class from the active dot
    dots[activeDotNum].classList.remove('active');
    // add the active class to the next dot
    dots[activeDotNum + 1].classList.add('active');
    // now set the active dot number to the next dot;
    activeDotNum = activeDotNum + 1;
    }
    }

    });
    })

    </script>
    </body>

    </html>