как только показать кнопку назад после того, как первый слайд в FlipBook

Question

Функциональность: Создали слайд-шоу с эффектом Flipbook и использовал следующий плагин: Turn.js, для достижения эффекта флип. Во-вторых, я редактировал и добавлял в левую и правую кнопку, чтобы пользователи могли нажимать кнопку и чтобы они могли перемещаться по страницам.

Выпуск:

Обе стрелки показывают, даже на начальной & последней странице. Следовательно, как я могу установить соответствующую стрелку на начальной странице &? На первой странице и предыдущей стрелке появится только стрелка Next Slide, а на последней странице - не две стрелки, как на первой и последней странице, например, что происходит сейчас.

Что я сделал:

У меня есть набор в DIV как для следующего слайда стрелки и предыдущий слайд стрелки, а также основной DIV для flipbbok слайдов. На этом этапе стрелки отображаются для каждой страницы, даже для первой и последней страницы.

Как возможно, чтобы у меня были только следующие стрелки слайдов на первой странице и предыдущей стрелке на последней странице.

Любая помощь приветствуется.

Код:

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

Вы (вероятно) хотят изменить CSS display свойство none на двух элементов управления #LeftSide и #RightSide. Вы задали только половину вопроса - не отображать Назад на первой странице - но вы, вероятно, также захотите скрыть Next на последней странице.

Вы можете использовать $("#Model_flipbook").turn("page")page property, чтобы определить, на какой странице вы находитесь при каждом переводе.

Для получения второй половины информации используйте $("#Model_flipbook").turn("pages")pages property, чтобы получить счет страниц.

Затем напишите функцию, которая проверяет, находитесь ли вы на page == 0 или page == pages, и сделайте соответствующее изменение стиля и вызовите его из двух функций прослушивания onclick.

Дополнительно:

Во-первых, в вашем CSS, добавить класс называется скрытым:

.hidden { 
    display: none; 
} 

Затем добавить этот класс в HTML элемента LeftSide <button>:

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

Затем добавьте функцию, которая проверяет, на какой странице вы находитесь, и стилирует кнопки:

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"); 
    } 
} 

Затем добавьте в вашу функции перелистывания страниц функции, СледующаяСтраница и PreviousPage после поворота страницы:

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

Обратите внимание, что это простое, но неэффективное решение, чтобы вы собираетесь концептуально.