script per far si che la galleria a scorrimento torni alla prima immagine dopo essere arrivata all'ultima

[rei84]

Salve a tutti,
Ho creato uno slider a scorrimento a cui ho associato uno script che permetta, cliccando sulle frecce da me create, di avanzare e retrocedere; ciò che però vorrei fare è fare in modo che, una volta giunti all'ultima immagine, cliccando sulla freccia destra, si torni alla prima (essendo quasi un neofita per quanto riguarda Javascript, non saprei davvero come fare). Come dovrei modificare il mio script?
Grazie in anticipo a chiunque mi aiuterà, posto qui il mio codice HTML, nonché il CSS e lo script Javascript

<section id="prima_sezione_a_scorrimento">       <div class="contenitore_della_prima_sezione_a_scorrimento">
       <div class="fila_di_video">
           <div class="contenitore_della_fila_di_video" id="contenitore_della_fila_di_video">
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine01.png" alt="immagine 01" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Death Note</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine02.png" alt="immagine 02" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">L'Attacco dei Giganti</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine03.png" alt="immagine 03" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Tokyo Ghoul</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine04.png" alt="immagine 04" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Mushishi</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine05.png" alt="immagine 05" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Kiseiju - Sei no kakuritsu</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine06.png" alt="immagine 06" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Le Bizzarre Avventure di Jojo</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine07.png" alt="immagine 07" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Psyco-Pass</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine08.png" alt="immagine 08" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Monster</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine09.png" alt="immagine 09" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Ghost in the Shell</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine10.png" alt="immagine 10" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Neon Genesis Evangelion</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine11.png" alt="immagine 11" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Kaiji</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine12.png" alt="immagine 12" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Steins;gate</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine13.png" alt="immagine 13" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Ergo proxy</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine14.png" alt="immagine 14" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Mirai Nikki</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine15.png" alt="immagine 15" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Another</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine16.png" alt="immagine 16" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Btooom!</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine17.png" alt="immagine 17" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Durarara</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine18.png" alt="immagine 18" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Toradora</div>
                   </div>
               </div>
               <div class="elementi" id="elementi">
                   <div class="elementi_video_e_miniature"><img src="immagini/immagine19.png" alt="immagine 19" class="immagini_della_sezione_a_scorrimento"></div>
                   <div class="dettagli_elemento">
                       <div class="titolo_elemento">Innocent Venus</div>
                   </div>
               </div>
           </div>
       </div>
       </div>
       <div id="tasto_indietro"><</div>
       <div id="tasto_avanti">></div>
       </section>

#prima_sezione_a_scorrimento h1, #prima_sezione_a_scorrimento p {    text-align: center;
}
#prima_sezione_a_scorrimento p {
    margin: auto;
    max-width: 500px;
    width: 100%;
}
#prima_sezione_a_scorrimento a:link, #prima_sezione_a_scorrimento a:hover, #prima_sezione_a_scorrimento a:active, #prima_sezione_a_scorrimento a:visited {
    color: #95a5a6;
    text-decoration: none;
    -webkit-transition: #95a5a6 150ms;
    -moz-transition: #95a5a6 150ms;
    -ms-transition: #95a5a6 150ms;
    -o-transition: #95a5a6 150ms;
    transition: #95a5a6 150ms;
}
#prima_sezione_a_scorrimento a:hover {
    color: #7f8c8d;
    text-decoration: underline;
}
.contenitore_della_prima_sezione_a_scorrimento {
    width: 100%;
}
.fila_di_video {
    overflow: hidden;
    width: 100%;
}
.contenitore_della_fila_di_video {
    font-size: 0;
    margin: 70.3125px 0;
    padding-bottom: 10px;
    -webkit-transition: 450ms translate3d(-125px, 0, 0);
    -moz-transition: 450ms translate3d(-125px, 0, 0);
    -ms-transition: 450ms translate3d(-125px, 0, 0);
    -o-transition: 450ms translate3d(-125px, 0, 0);
    transition: 450ms translate3d(-125px, 0, 0);
    white-space: nowrap;
}
.elementi {
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    height: 140.625px;
    margin-right: 10px;
    position: relative;
    transform-origin: center left;
    transition: 450ms all;
    width: 250px;
}
.immagini_della_sezione_a_scorrimento {
    height: 140.625px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 250px;
}
.dettagli_elemento {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    bottom: 0;
    font-size: 10px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: 450ms 0;
    -moz-transition: 450ms 0;
    -ms-transition: 450ms 0;
    -o-transition: 450ms 0;
    transition: 450ms 0;
}
.dettagli_elemento:after, .dettagli_elemento:before {
    content: '';
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
}
.dettagli_elemento:after {
    background: rgba(0,0,0,0.5);
    border: 3px solid #ecf0f1;
    border-radius: 100%;
    height: 50px;
    line-height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    text-align: center;
    width: 50px;
    z-index: 3000;
}
.dettagli_elemento:before {
    content: '▶';
    font-size: 30px;
    left: 0;
    margin-left: 7px;
    margin-top: -18px;
    text-align: center;
    width: 100%;
    z-index: 3001;
}
.elementi:hover .dettagli_elemento {
    opacity: 1;
}
.titolo_elemento {
    bottom: 0;
    padding: 10px;
    position: absolute;
}
.contenitore_della_fila_di_video:hover {
    -webkit-transform: translate3d(-125px, 0, 0);
    -moz-transform: translate3d(-125px, 0, 0);
    -ms-transform: translate3d(-125px, 0, 0);
    -o-transform: translate3d(-125px, 0, 0);
    transform: translate3d(-125px, 0, 0);
}
.contenitore_della_fila_di_video:hover .elementi {
    opacity: 0.3;
}
.contenitore_della_fila_di_video:hover .elementi:hover {
    opacity: 1;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}
.elementi:hover ~ .elementi {
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -ms-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
}
#tasto_indietro, #tasto_avanti {
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    cursor: pointer;
    font-family: monospace;
    font-size: 30px;
    font-weight: bolder;
    height: 40px;
    line-height: 35px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transition: translateY(-50%);
    -moz-transition: translateY(-50%);
    -ms-transition: translateY(-50%);
    -o-transition: translateY(-50%);
    transition: translateY(-50%);
    width: 40px;
}
#tasto_indietro {
    left: 10px;
}
#tasto_avanti {
    right: 10px;
}
#tasto_indietro:hover, #tasto_avanti:hover {
    background: rgba(0,0,0,0.1);
}

$('#tasto_avanti').click(function() {      event.preventDefault();
      $('#elementi').animate({
        marginLeft: "-=600px"
      }, "fast");
   });


 $('#tasto_indietro').click(function() {
      event.preventDefault();
      $('#elementi').animate({
        marginLeft: "+=600px"
      }, "fast");
 });

[m4rko80]

Ciao, non ho testato il codice ma ad occhio e croce su ogni click sposti di 600px le immagini, avanti o indietro.
Probabailmente basterebbe tener conto dei click a seconda se avanzi o retrocedi. Ad un certo punto avrai N click quanti il totale degli elementi. Se sul prossimo click superi il totale al posto di avanzare tornerai indietro di N elementi x il valore di spostamento(600).

[rei84]

Grazie mille per la risposta.
Ho provato ad applicare il suggerimento ma essendo, come detto, pressoché un neofita ho ottenuto pochi risultati pendo di dover usare qualcosa del genere

var scorrimento = $('#elementi');
$('#elementi div:last').insertBefore('#elementi div:first');

ma so che è proprio sbagliato non saprei davvero come fare. Una domanda: lo script che ho fatto in origine, è modificabile per inserire ciò che mi hai suggerito o è proprio da riformulare?
Ps: So che questa mia ultima domanda è stupida ma ripeto mi sto approcciando a Javascript appena adesso