Ich habe Bxslider auf meiner Seite und zwei Schieberegler

Zuerst hier und in funktioniert super

Top Slider

Zweitens hier ist der untere Schieberegler

bottom slider

Es werden immer mehr Zeilen erstellt (da ich dem Schieberegler neue Elemente hinzufüge), aber alles, was ich brauche, ist, dass nur 4 Folien in einer einzelnen Zeile angezeigt werden (ich benötige keine weiteren Zeilen).

Hier, wie es im Code aussieht

<div class="popular-slider">
    <ul class="bxslider">
        <li>
            <div class="popular">
                <div class="item">
                    <img src="img/popular1.jpg"><br>
                    <p>
                        <a href="#">Item text 1</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular2.jpg"><br>
                    <p>
                        <a href="#">Item text 2</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular3.jpg"><br>
                    <p>
                        <a href="#">Item text 3</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 4</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 5</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 6</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 7</a>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </li>
    </ul>
</div>

Hier was ich in CSS habe

.main-content .popular {
  background: #fff;
}
.main-content .popular .item {
  float: left;
  width: 25%;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.main-content .popular .item:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 0;
}
.main-content .popular .item p {
  text-align: left;
  padding-left: 20px;
}
.main-content .popular .item p a {
  font-size: 16px;
  color: #414a56;
}

Hier ist mein bxslider Code

$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    autoControls: true,
    speed: 500
  });
});
3
ildar 23 Dez. 2015 im 09:54

3 Antworten

Beste Antwort

Änderungen

  1. Der Grund, warum Ihr Schieberegler so viele Folien anzeigt, ist, dass Sie den bxSlider einem <ul> zugewiesen haben, der nur ein großes <li> hatte. Um dies zu beheben:

    • <ul class="bxslider"> und <li>

    • wurden entfernt
    • Neu zugewiesenes bxSlider-Plugin zu <div class="popular">

    • Bezeichnet jedes <div class="item"> als Folie. Siehe slideSelector

  2. In CSS wird .main-content verwendet, im HTML gibt es jedoch ein .popular-slider. Ich habe <div class="popular-slider"> in <div class="main-content"> geändert. Ohne dieses Update würde keines Ihrer CSS funktionieren.

  3. Verwendete die folgenden bxSlider-Optionen, um 4 Folien gleichzeitig anzuzeigen:

    • minSlides: 4 Sperren Sie die Anzahl der Folien um ...

    • maxSlides: 4... weist ...

    • moveSlides: 4... diese drei Optionen. In Ihrem Fall ist es 4.

    • slideWidth: 200... Wenn Sie ein Karussell erstellen (ein Schieberegler wird angezeigt) mehr als eine Folie gleichzeitig), müssen Sie die Breite einer einzelnen Folie mithilfe der Option slideWidth angeben.

    • Es gibt noch eine Sache, die bei Karussells nicht sehr offensichtlich ist, die Sie beachten sollten. Verwenden Sie diese einfache Regel, um die Anzahl der benötigten Folien zu bestimmen: Teilen Sie die geplante Gesamtsumme durch die Anzahl der Folien, die Sie gleichzeitig anzeigen möchten. Wenn das Ergebnis eine ganze Zahl ist (z. B. 1, 2, 3 ...), ist es in Ordnung. In Ihrem Fall sollten Sie 4 (aber das ist langweilig), 8, 12, 16, 20 haben ... Der Grund dafür ist, dass wenn Ihr Karussell 7 Folien hatte (ich habe die 8. Folie hinzugefügt), es nicht anhalten oder anhalten würde die Folien konsistent:

      • 1. Zug: Folie 5 befindet sich jetzt in der ersten Position
      • 2. Zug: Folie 2 befindet sich jetzt in der ersten Position
      • 3. Zug: Folie 6 befindet sich jetzt in der ersten Position
    Can't load full resultsTry againRetrying...Retrying...

Ausschnitt

$(function() {
  $('.popular').bxSlider({
    auto: true,
    autoControls: true,
    speed: 500,
    slideSelector: 'div.item',
    minSlides: 4,
    maxSlides: 4,
    moveSlides: 4,
    slideWidth: 200


  });
});
.main-content .popular {
  background: #fff;
}
.main-content .popular .item {
  float: left;
  width: 25%;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.main-content .popular .item:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 0;
}
.main-content .popular .item p {
  text-align: left;
  padding-left: 20px;
}
.main-content .popular .item p a {
  font-size: 16px;
  color: #414a56;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="main-content">

  <div class="popular">
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 1</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 2</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 3</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 4</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 5</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 6</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 7</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 8</a>
      </p>
    </div>
    <div class="clear"></div>
  </div>

</div>
5
zer00ne 23 Dez. 2015 im 09:32

Schreiben Sie in js:

$('.bxslider').bxSlider({
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  slideMargin: 10
});
2
Amitesh Kumar 23 Dez. 2015 im 07:00

Ich habe einige geringfügige Änderungen an Ihrer HTML-Struktur vorgenommen. Siehe unten:

<div class="popular-slider bx-viewport">
<div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
<ul class="bxslider">
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular1.jpg">
                <br>
                <p> <a href="#">Item text 1</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular2.jpg">
                <br>
                <p> <a href="#">Item text 2</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular3.jpg">
                <br>
                <p> <a href="#">Item text 3</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 4</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 5</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 6</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 7</a> </p>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul></div>

In der JS-Datei von bxslider muss eine kleine Wertänderung vorgenommen werden:

// CAROUSEL
    minSlides: 4,
    maxSlides: 4,
    moveSlides: 4,
    slideWidth: 300,

Passen Sie Ihren Wert für die Folienbreite gemäß Ihrem Layout an. Hoffe das hilft!!

1
Kishore Krishnan 23 Dez. 2015 im 07:49