Używanie karuzeli Bootstrap do wyświetlania tylko 8 elementów na każdym slajdzie

Generuję tablicę obiektów o nieokreślonej liczbie cyfr (ponieważ tablica jest tworzona dynamicznie i bazuje na interfejsie administratora i liczbie obiektów, które wprowadzono). Próbuję użyj karuzeli Bootstrap, aby wyświetlić tylko 8 obiektów na każdym slajdzie, a jeśli jest ich więcej niż 8, przenieś dodatki do następnego slajdu do 16, następnie następny slajd do 24 i tak dalej. Chcę również, aby był uruchamiany, jeśli użytkownik kliknie w przód lub w tył (nie, aby przejść automatycznie przez slajdy).Używanie karuzeli Bootstrap do wyświetlania tylko 8 elementów na każdym slajdzie

Poniżej znajduje się mój kod, który jest uruchamiany, w tym zmienna idx, która jest sekwencyjnym numerem obiektu w tablica (zero oparte.)

HTML

  <div id="articles" class="articles"></div>

JavaScript:

$(document).ready(function(){ 
     <% JSONObject jsonObject=(JSONObject)session.getAttribute("responseDetailsJson"); %> 
     var tileSetObjects = <%=jsonObject%> 
      $.each(tileSetObjects.HelpJSONArray, function(idx, obj){ 
       $('#articles').append('<article class="pdf-guide" id="article-'+idx+'"><a href="'+obj.LINKVALUE+'" class="link-wrapper"><div class="title-link">'+obj.TITLE+'</div><p class="description">'+obj.LONGCONTENT+'</p></a></article>'); 
      }); 
     });

Dziękuję za t on pomoc!

Źródło

2017-04-12 dihakz

Mówisz, że używasz Bootstrap, ale twój znacznik nie odzwierciedla tego w ogóle.

Zacznę od Bootstrap JavaScript Documentation, która zawiera szczegółowy rozdział o karuzeli.

Zgodnie z opisem ustaw opcję interval na "false", aby wyłączyć automatyczne przewijanie, które pozwoli uzyskać pożądane zachowanie. Zgodnie z opisem w dokumentacji:

Czas opóźnienia między automatycznym cyklowaniem przedmiotu. W przypadku wartości false karuzela nie będzie automatycznie cyklowana.

Odnośnie 8 na raz, JavaScript wygląda to powinno działać, choć część wtrysku znaczniki będą musiały zostać zmienione, aby dopasować karuzeli znaczników Bootstrap (patrz link powyżej).

Źródło

2017-04-18 03:21:18 lax1089

-1

Liczba obiektów zależy od szerokości przypisanej do karuzeli BootStrap i zależy od szerokości poszczególnych slajdów.

enter code herehttp://jsfiddle.net/asimshahiddIT/f1a1zbh4/1/

Źródło

2017-04-21 13:02:06 asimshahiddIT

Nie jestem pewien, czy jest to możliwe z karuzeli startowej. Ale są suwaki, które mogą spełnić twoje wymagania. Suwak "Ślizg" to wtyczka, która pasuje do Twoich wymagań i jest responsywna.

Możesz znaleźć wersję demonstracyjną tutaj: http://kenwheeler.github.io/slick/ i wyszukać "Wiele przedmiotów".

Źródło

2017-04-21 14:33:49

Polecam użyć Flickity biblioteki suwaków JavaScript, zbudowanej przez Davida DeSandro ze sławnej Metafizzy. Aby móc tworzyć lub tworzyć responsywne, przyjazne dla użytkownika karuzele, które można łatwo dostosować do własnych upodobań. Zawiera różne funkcje, takie jak wraparround, freescroll, groupcells, autoplay, lazyload, parallax i wiele innych.

Aby uzyskać komórkę grupującą według potrzeb, na przykład potrzeba 8 w każdym slajdzie, aby ustawić żądaną liczbę: data-flickity='{ "groupCells": 8 }.Następnie podziel 100% na podstawie z pożądanej liczby, na przykład 100% podziel na 8, a następnie ustaw jako szerokość karuzeli .carousel-cell { width: 12.5%;} Mam nadzieję, że pomogę ci i dodasz dodatkową bibliotekę lub wtyczki do rozwoju twojej strony. Miłego dnia. :)

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css"> 
    <script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script> 
</head> 
<body> 
    <h1>Flickity - groupCells</h1> 

    <!-- Flickity HTML init --> 
    <div class="carousel" data-flickity='{ "groupCells": 8, "autoPlay": true }' style=""> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <div class="carousel-cell"></div> 
     <!--Add More Here.....--> 
    </div> 

</body> 
</html> 
<style type="text/css"> 
    /* external css: flickity.css */ 

* { box-sizing: border-box; } 

body { font-family: sans-serif; } 

.carousel { 
    background: #EEE; 
} 

.carousel-cell { 
    width: 12.5%; 
    height: 200px; 
    margin-right: 10px; 
    background: #8C8; 
    border-radius: 5px; 
    counter-increment: carousel-cell; 
} 

.carousel-cell.is-selected { 
    background: #ED2; 
} 

/* cell number */ 
.carousel-cell:before { 
    display: block; 
    text-align: center; 
    content: counter(carousel-cell); 
    line-height: 200px; 
    font-size: 80px; 
    color: white; 
} 

</style>

Źródło

2017-04-24 14:10:03 Ace

Używanie karuzeli Bootstrap do wyświetlania tylko 8 elementów na każdym slajdzie

Odpowiedz

Powiązane problemy