Eulenkarussell 2 Nav an den Seiten

Hallo, ich verwende Owl Carousel Version 2 und kann kein Beispiel finden, um die Navigation an den Seiten des Karussells wie rechte und linke Chevrons oder Pfeile zu platzieren. Wie machst du das?

Das habe ich erst gestern gemacht 🙂

Stellen Sie zunächst sicher, dass das Navi in ​​der Konfiguration aktiviert ist

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

   $('#_samewidth_images').owlCarousel({
      margin:10,
      autoWidth:false,
      nav:true,
      items:4,
      navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>']
  })

Dadurch werden die Steuerelemente in das DOM eingefügt, siehe

https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>

Verwenden Sie als Nächstes CSS, um die Steuerelemente „Next“ und „Prev“ zu positionieren. Dies ist, was ich verwendet habe:

.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    margin-left: -20px;
    display: block !important;
    border:0px solid black;
}

.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    right: -25px;
    display: block !important;
    border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}

Für meine Symbole habe ich Font Awesome verwendet, aber Sie könnten etwas Ähnliches verwenden. Beachten Sie das Navigationstext Im Javascript-Code fügen Sie hier Ihren benutzerdefinierten HTML-Code ein. Ich denke, Sie könnten auch ein Bild verwenden (oder es in den Hintergrund der .owl-next- und .owl-prev-Divs einfügen. Beachten Sie, dass ich Transformation verwendet habe, um meine Pfeile höher zu machen.

Nur eine kleine Verbesserung von der Antwort von @KevinSol oben.

https://stackoverflow.com/a/40449552/10933080

Dies ist mein JS-Code:

    $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    });

und mein CSS-Code:

    .owl-prev, .owl-next {
        width: 15px;
        height: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block !important;
        border:0px solid black;
    }
    .owl-prev { left: -20px; }
    .owl-next { right: -20px; }
    .owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}

Passen Sie die Navigationspfeile von Owl Carousel 2 an

Quelle Verknüpfung

Arbeitsdemo Verknüpfung

Aktualisieren Sie die Navigationstext Eigentum

    $('.owl-carousel').owlCarousel({
        margin: 10,
        nav: true,
        navText:["<div class="nav-btn prev-slide"></div>","<div class="nav-btn next-slide"></div>"],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    });

CSS-Stil hinzufügen

.carousel-wrap {
    width: 1000px;
    margin: auto;
    position: relative;
}
.owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
}

.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: #2caae1;
}


.owl-carousel .item {
    text-align: center;
}
.owl-carousel .nav-btn{
    height: 47px;
    position: absolute;
    width: 26px;
    cursor: pointer;
    top: 100px !important;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
}

.owl-carousel .prev-slide{
    background: url(nav-icon.png) no-repeat scroll 0 0;
    left: -33px;
}
.owl-carousel .next-slide{
    background: url(nav-icon.png) no-repeat scroll -24px 0px;
    right: -33px;
}
.owl-carousel .prev-slide:hover{
    background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
    background-position: -24px -53px;
}

span.img-text {
    text-decoration: none;
    outline: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    cursor: pointer;
    width: 100%;
    font-size: 23px;
    display: block;
    text-transform: capitalize;
}
span.img-text:hover {
    color: #2caae1;
}

HTML-Markup

 <div id="slider" class="owl-carousel">
        <div class="item">
            <img src="https://stackoverflow.com/questions/40442683/assets/img/header-img.jpg" alt="" />
        </div>
        <div class="item">
            <img src="https://stackoverflow.com/questions/40442683/assets/img/header-img.jpg" alt="" />
        </div>
        <div class="item">
            <img src="https://stackoverflow.com/questions/40442683/assets/img/header-img.jpg" alt="" />
        </div>
        <div class="item">
            <img src="https://stackoverflow.com/questions/40442683/assets/img/header-img.jpg" alt="" />
        </div>
        <div class="item">
            <img src="https://stackoverflow.com/questions/40442683/assets/img/header-img.jpg" alt="" />
        </div>
    </div>

Der Schieberegler im CSS-Stil ist der Klassenname

#slider .owl-nav div.owl-prev, 
#slider .owl-nav div.owl-next {
    color: #fff;
    font-size: 18px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    text-align: center;
    line-height: 39px;
    opacity: 0;
    border:1px solid #fff;
    width: 40px;
    height: 40px;
}
#slider .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
#slider .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
#slider:hover .owl-nav div.owl-next{
    right: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider:hover .owl-nav div.owl-prev{
    left: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider:hover .owl-nav div.owl-next:hover,
#slider:hover .owl-nav div.owl-prev:hover{
    color:#fff;
    background: #0C94B8;
    border: 1px solid #0C94B8;
}

Slider-Aktivierung

$('#slider').owlCarousel({
        loop:true,
        items: 1,
        margin:10,
        autoplay: true,
        nav:true,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
    })

Ich empfehle die Verwendung dieses einfachen Stils:

.owl-nav button {
    position: absolute;
    top: 0;
    bottom: 0;
}

.owl-prev {
    right: -25px;
}

.owl-next {
    left: -25px;
}

.owl-nav button i {
    font-size: 25px;
    text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

Und folgende Konfig:

nav: true,
navText: ["<i class="fa fa-chevron-right"></i>","<i class="fa fa-chevron-left"></i>"],

all-slider ist Klassenname

 #all-slide .owl-nav div.owl-prev, 
    #all-slide .owl-nav div.owl-next {
        color: #fff;
        font-size: 18px;
        margin-top: -20px;
        position: absolute;
        top: 50%;
        text-align: center;
        line-height: 39px;
        opacity: 0;
        border:1px solid #fff;
        width: 40px;
        height: 40px;
    }
    #all-slide .owl-nav div.owl-prev{
        left: 10%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -ms-transition: 0.4s;
    }
    #all-slide .owl-nav div.owl-next {
        right: 10%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -ms-transition: 0.4s;
    }
    #all-slide:hover .owl-nav div.owl-next{
        right: 2%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -ms-transition: 0.4s;
        opacity: 1;
    }
    #all-slide:hover .owl-nav div.owl-prev{
        left: 2%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -ms-transition: 0.4s;
        opacity: 1;
    }
    #all-slide:hover .owl-nav div.owl-next:hover,
    #all-slide:hover .owl-nav div.owl-prev:hover{
        color:#fff;
        background: #0C94B8;
        border: 1px solid #0C94B8;
    }`enter code here`

Wenn Sie es nur mit etwas CSS und einem Pfeil in einer Kante, dem anderen in der anderen Kante ohne Rand machen möchten, aber den Schieberegler abdecken, können Sie dieses CSS verwenden:

.owl-nav button span {
    font-size: 60px;
    padding: 0px 20px;
}

button.owl-prev {
    float: left;
}

button.owl-next {
    float: right;
}

.owl-nav {
    width: 100vw;
    position: absolute;
}

.owl-carousel.owl-theme.owl-loaded.owl-drag {
    display: flex;
    justify-content: center;
    align-items: center;
}