web-dev-qa-db-ja.com

カスタムナビゲーションを行うフクロウカルーセル

だから、3つの画像を含むフクロウカルーセルがあります。また、左側と右側にカスタムナビゲーション矢印（.png画像）を追加しました。ただし、これらの矢印は現在のところ役に立たない。なぜなら、私のフクロウカルーセルの画像を実際に切り替える方法を見つけることができないからである。私は無限に検索し、解決策を見つけることができません。何か案は？

jqueryhtmlcss3carouselowl-carousel
38
bltzrrr

ナビゲーションを有効にして、navigationTextを編集する必要があります。

>これがversion 1.3.2であると仮定します

owlgraphic.com/owlcarousel/#customizing

注：Owl 1.3のサイトは現在ダウンしているように見えるので、 分岐されたCodepenの例 です。

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

> version 2だと仮定すると：

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

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

個人提案： Slick over Owl

個人的な提案の更新： 小さなスライダー も素晴らしいです。

100
Stu Furlong

つまり、矢印のクラスを追加しますが、画像も使用できます。

以下は、fontAwesomeの例です。

JS：

owl.owlCarousel({
    ...
    // should be empty otherwise you'll still see prev and next text,
    // which is defined in js
    navText : ["",""],
    rewindNav : true,
    ...
});

CSS

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'fontAwesome';

}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\f053";
    margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\f054";
    margin-right:10px;
}

画像を使用：

.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:30px;
    height:30px;
    ...
}
.owl-carousel .owl-nav .owl-prev{
    background: url('left-icon.png') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
    background: url('right-icon.png') no-repeat;
}

たぶん誰かがこれを役立つと思うでしょう:)

10
Angel M.

カスタムナビゲーションを作成し、必要なクラスを与えれば、準備は完了です。それは簡単です。

例を見てみましょう：

<div class="owl-carousel">
      <div class="single_img"><img src="1.png" alt=""></div>
      <div class="single_img"><img src="2.png" alt=""></div>
      <div class="single_img"><img src="3.png" alt=""></div>
      <div class="single_img"><img src="4.png" alt=""></div>
</div>
                
<div class="slider_nav">
        <button class="am-next">Next</button>
        <button class="am-prev">Previous</button>
</div>

Jsファイルでは、次のことができます。

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});
8
Mr.Online

独自のカスタムナビゲーション要素を使用する場合は、

フクロウのカルーセル1

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    owl.trigger('owl.next');
})

フクロウカルーセル2

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})
5
Dushan

フクロウカルーセル2では、次のようなnavTextオプションで、素晴らしいフォントまたはカスタムイメージを使用できます。

$(".category-wrapper").owlCarousel({
     items: 4,
     loop: true,
     margin: 30,
     nav: true,
     smartSpeed: 900,
     navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});
3
Rubel Hossain

次のコードはowl carouselで動作します。

https://github.com/OwlFonk/OwlCarousel

$(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    navigation: true,
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

ForOwlCarousel2

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

 $(".owl-carousel").owlCarousel({
    items: 1,
    autoplay: true,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
3
Sword I

Prev/Nextボタンには、JSとSCSS/Fontawesomeの組み合わせを使用できます。

あなたのJSで（これにはスクリーンリーダーのみ/ Zurb Foundationのアクセシビリティクラスが含まれます）：

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

あなたのSCSSでこれ：

.owl-theme {

    .owl-nav {
        .owl-prev,
        .owl-next {
            font-family: FontAwesome;
            //border-radius: 50%;
            //padding: whatever-to-get-a-circle;
            transition: all, .2s, ease;
        }
        .owl-prev {
            &::before {
                content: "\f104";
            }
        }
        .owl-next {
            &::before {
                content: "\f105";
            }
        }
    }
}

FontAwesomeフォントファミリでは、ドキュメントヘッダーに埋め込みコードを使用します。

<script src="//use.fontawesome.com/123456whatever.js"></script>

FA、脳卒中/人々を含めるためのさまざまな方法がありますが、これは非常に高速で、webpackを使用しているので、ちょうど約と一緒に生きることができますその余分なjsサーバー呼び出し。

そしてこれを更新するために-アクセシビリティを念頭に置いた、少し複雑な矢印のためのこのJSオプションもあります：

$('.whatever-carousel').owlCarousel({
    navText: ["<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Previous</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-left fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>","<span class=\"fa-stack fa-lg\" aria-hidden=\"true\"><span class=\"show-for-sr\">Next</span><i class=\"fa fa-circle fa-stack-2x\"></i><i class=\"fa fa-chevron-right fa-stack-1x fa-inverse\" aria-hidden=\"true\"></i></span>"]
})

大量のエスケープが必要な場合は、代わりに単一引用符を使用してください。

そして、SCSSで:: before attrsをコメントアウトするだけです：

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }
2
redplanet

私の解決策は

navigationText：[""、 ""]

完全なコードは以下のとおりです。

    var owl1 = $("#main-demo");
    owl1.owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        pagination:false,
        singleItem: true, transitionStyle: "fade",
        navigationText: ["", ""]
    });// Custom Navigation Events

    owl1.trigger('owl.play', 4500);
1
Fatih Topcu

完全なチュートリアルhere

デモlink

enter image description here

JavaScript

$('.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: 5
        }
    }
});

ナビゲーションのCSSスタイル

.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;
}
1
Code Spy