web-dev-qa-db-ja.com

次の前の代わりに矢印でフクロウカルーセルを作成する方法

昨日、顧客にウェブサイトを用意しました。応答性が良いので、私は常にOwlカルーセルを使用します。クライアントは、これまでの、次の言葉をどれほど嫌っていたのか、それらを矢印に変えたいと思っていました。

そのため、スクリプトを更新しました。 jsファイル。とても簡単で、共有したかったです。

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    nav:true,
    responsive:{
     ...
 })
 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
});

ようこそ。いつでもスタイルを追加できます。 （最初に自分の質問に答えを使用するとき、これが正しい場所/方法であることを願っています）

javascriptjquerycarousel
23
user3806549

これは、FontAwesomeアイコンを使用して$(document).ready()関数で行う方法です。

 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
9
user3806549

Owl Carousel 2を使用している場合は、次を使用する必要があります。

$(".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>"]
   });
44
Rubel Hossain

Owl Carousel v 1.3.2を使用している可能性のある他の人への注意：

ナビゲーションを有効にする設定のナビゲーションテキストを置き換えることができます。

navigation:true,
navigationText: [
   "<i class='fa fa-chevron-left'></i>",
   "<i class='fa fa-chevron-right'></i>"
]
17
Pandy

次のコードは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>"]
});
12
Sword I

完全なチュートリアル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;
}
11
Code Spy

最新のOwl Carousel 2バージョンを使用している場合。ナビゲーションテキストをfontawesomeアイコンに置き換えることができます。コードは以下です。

$('.your-class').owlCarousel({
        loop: true,
        items: 1, // Select Item Number
        autoplay:true,
        dots: false,
        nav: true,
        navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],

    });
2
Tariqul_Islam