Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60

    slideshow o galleria di immagini

    ho provato diverse gallerie ma non riesco nel mio intento quello che voglio e su questo genere MRcW1.jpg (550×322) (imgur.com) quello che mi chiedo come può essere strutturato il codice? qualcuno mi può dare una mano grazie.

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    ho provato scomporre diversi codici e ha unirli ma il risultato è sempre stato una immagine per slide.

  3. #3
    Non ho capito che genere di galleria vuoi!
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    ciao la galleria che voglio creare è questa
    <div class="center">
    <div class="wrapper">
    <div class="inner">
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
    <div class="content">
    <h1>Product Design</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
    <div class="content">
    <h1>Custom Website</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/1.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/2.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    <div class="card">
    <img src="https://colorlib.com/preview/theme/seogo/img/case_study/3.png">
    <div class="content">
    <h1>Digital Marketing</h1>
    <h3>UI/UX, Design</h3>
    </div>
    </div>
    </div>
    </div>

    <div class="map">
    <button class="active first"></button>
    <button class="second"></button>
    <button class="third"></button>
    </div>
    </div>

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    ora metto lo style

    html,
    body {
    height: 100%;
    }


    body {
    background: #001d38;
    font-family: "Poppins", sans-serif;
    overflow: hidden;
    }


    .center {
    -webkit-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    }


    .wrapper {
    display: -webkit-box;
    display: flex;
    grid-gap: 1em;
    overflow: hidden;
    width: 55em;
    }
    .wrapper > .inner {
    display: -webkit-box;
    display: flex;
    grid-gap: 1em;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }


    .card {
    border-radius: 0.5em;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    }
    .card > img {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    display: block;
    width: 17.5em;
    }
    .card > .content {
    background: #0a2640;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 1em;
    text-align: center;
    }
    .card > .content > h1, .card > .content > h3 {
    margin: 0.35em 0;
    }
    .card > .content > h1 {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    }
    .card > .content > h3 {
    color: #ccc;
    font-size: 0.9rem;
    font-weight: 300;
    }


    .map {
    margin-top: 1em;
    }
    .map > button {
    all: unset;
    background: #11406c;
    cursor: pointer;
    margin: 0 0.125em;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 100%;
    height: 1em;
    width: 1em;
    }
    .map > button.active:after {
    background: #001d38;
    content: "";
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    border-radius: 100%;
    height: 0.5em;
    width: 0.5em;
    }

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    ora metto javascripit

    const buttonsWrapper = document.querySelector(".map");
    const slides = document.querySelector(".inner");


    buttonsWrapper.addEventListener("click", e => {
    if (e.target.nodeName === "BUTTON") {
    Array.from(buttonsWrapper.children).forEach(item =>
    item.classList.remove("active")
    );
    if (e.target.classList.contains("first")) {
    slides.style.transform = "translateX(-0%)";
    e.target.classList.add("active");
    } else if (e.target.classList.contains("second")) {
    slides.style.transform = "translateX(-33.33333333333333%)";
    e.target.classList.add("active");
    } else if (e.target.classList.contains('third')){
    slides.style.transform = 'translatex(-66.6666666667%)';
    e.target.classList.add('active');
    }
    }
    });

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    se lo metto doppio sulla stessa pagina il secondo non gira le pagine come mai ho provato a cambiare anche i nomi delle class"" ma non succede nulla. dove sta il problema

  8. #8
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    60
    cosa devo modificare per farsi che funzionano tutte due

  9. #9
    Non hai pensato di realizzartela da solo una galleria di questo tipo invece di tentare di raccapezzarti con quelle di terzi?

    Mostri le prime 3 immagini e poi a seconda di come ti vuoi muovere fai sparire la prima e comparire la quarta o viceversa.
    Credo che se ti applichi un minimo su un tuo progetto riuscirai a fare grandi cose oltre che a comprendere di più in programmazione.

  10. #10
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    718
    Anni fa avevo usato Owl Carousel.

    Penso che potrebbe fare al caso tuo.
    https://owlcarousel2.github.io/OwlCa...esponsive.html

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.