comment montrer que le bouton de retour après la première diapositive flipbook

Question

Fonctionnalité: ont créé un diaporama avec un effet de flipbook et l 'utilisation du plug-in suivant: Turn.js, pour obtenir l'effet flip. Deuxièmement, j'ai édité et ajouté dans le bouton gauche et droit, pour permettre aux utilisateurs de cliquer sur le bouton et afin qu'ils puissent naviguer à travers les pages.

Problème:

Les deux flèches sont affichés, même sur la première & dernière page. Par conséquent, comment est-ce que je peux placer la flèche appropriée pour apparaître sur la dernière page & initiale? Seule la flèche Diapositive suivante apparaîtra dans la page initiale et la flèche précédente apparaîtra dans la dernière page et non les deux flèches apparaîtront dans la page initiale et la dernière page, comme ce qui se passe actuellement.

Qu'est-ce que je l'ai fait:

J'ai un ensemble un div tant pour la diapositive suivante flèche et la flèche précédente diapositive ainsi que le principal div pour les diapositives flipbbok. À ce stade, les flèches sont affichées pour chaque page, même pour la première et la dernière page.

Comment est-il possible pour moi d'avoir seulement les flèches de la prochaine page et la flèche précédente à la dernière page.

Toute aide est appréciée.

code:

function Models() { 
 
    console.log("Models"); 
 
    $("#Model_flipbook").turn({ 
 
    width: 1920, 
 
    height: 1080, 
 
    autoCenter: false 
 
    }); 
 
} 
 

 
function NextSlide() { 
 
    $("#Model_flipbook").turn("next"); 
 
    console.log("next"); 
 
} 
 

 

 
function PreviousSlide() { 
 
    $("#Model_flipbook").turn("previous"); 
 
    console.log("previous"); 
 
}

#LeftSide { 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 0px; 
 
    left: 0px; 
 
    outline: 0px; 
 
    z-index: 2; 
 
    border: 0; 
 
    background: transparent; 
 
} 
 
#RightSide { 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 0px; 
 
    left: 1691px; 
 
    outline: 0px; 
 
    z-index: 2; 
 
    border: 0; 
 
    background: transparent; 
 
}

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; "> 
 

 
    <button id="LeftSide" onclick="PreviousSlide()"> 
 
    <img src="lib/img/LeftSide.png"> 
 
    </button> 
 
    <button id="RightSide" onclick="NextSlide()"> 
 
    <img src="lib/img/RightSide.png"> 
 
    </button> 
 

 
    <!--Div part for keynote images--> 
 
    <div id="Model_flipbook" style="position:absolute;"> 
 
    <div id="Model_flip_1"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_1.jpeg" /> 
 
    </div> 
 
    <div id="Model_flip_2"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_2.jpeg" /> 
 
    </div> 
 
    <div id="Model_flip_3"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_3.jpeg" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Vous (probablement) que vous souhaitez modifier la propriété CSS display-none sur les deux éléments de commande et #LeftSide#RightSide. Vous avez seulement demandé la moitié de la question - ne pas afficher Retour sur la première page - mais vous voulez probablement aussi cacher Suivant sur la dernière page.

Vous pouvez utiliser le $("#Model_flipbook").turn("page")page property pour déterminer à quelle page vous vous trouvez chaque fois que vous retournez.

Pour la deuxième moitié du problème, utilisez le $("#Model_flipbook").turn("pages")pages property pour obtenir le nombre de pages.

Puis, écrivez une fonction qui vérifie si vous êtes sur page == 0 ou page == pages et apportez le changement de style approprié et appelez-le à partir de vos deux fonctions onclick listener.

supplémentaires:

D'abord, dans votre CSS, ajoutez une classe appelée cachée:

.hidden { 
    display: none; 
} 

Puis ajouter cette classe au code HTML de l'élément Leftside <button>:

<button id="LeftSide" class="hidden" onclick="PreviousSlide()"> 

Ensuite, ajoutez une fonction qui vérifie la page sur laquelle vous vous trouvez et stylise les boutons:

function checkPage(page) { 

    // Total number of pages 
    var pages = $("#Model_flipbook").turn("pages"); 

    // If the page we are currently on is not the first page, reveal the back button 
    if (page > 0) { 
    $("#LeftSide").removeClass("hidden"); 
    } 

    // If the page we're on is the last page, hide the next button 
    if (page == pages) { 
    $("#RightSide").addClass("hidden"); 
    } 
} 

Ensuite, ajoutez à vos fonctions de rotation page fonction, et NextPage PagePrécédente après le virage de la page:

checkPage($("#Model_flipbook").turn("page")); 

Notez que cette solution est simple mais inefficace pour vous aller sur le plan conceptuel.