質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

スライダーのカルーセルの透過が途中で切れてしまいます。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 962

score 13

bxsliderを使用して下記の条件のスライドを作成したいです。
・画像は960px×360px。
・カーセルで3つに並べる。
・両端の画像は幅が途中で切れる。
・両端の画像は透過される。
・ページャーとコントローラーを表示させたい。

実際作成してみたところ、透過部分が途中で切れてしまいます。
また、ページャーとコントローラーも表示されません。
360pxの高さを指定しても変化がなく困っています。

書いたコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(function(){
    var slide = $('#slider ul').bxSlider({
    pager : true,
        controls : true,
        slideWidth  : 1000,
        slideMargin : 20,
        controls    : true,
        auto        : true,
        minSlides   : 3,
        maxSlides   : 3,
        moveSlides  : 1,
        speed       : 1000,
        pause       : 5000,
        onSlideAfter: function(){
            slide.startAuto();
        }
    });
});
</script>
</head>
<body>
<div id="slider">
<div id="sliderInner">
<ul>
<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></li>
<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></li>
<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
<li><a href="index.html"><img src="https://placehold.jp/960x360.png" alt=""></a></li>
</ul>
<div id="slideFilterL"></div>
<div id="slideFilterR"></div>
</div><</div>
</body>
</html>
@charset "UTF-8";

/************************
共通CSS ドロワーメニュー
(bxslider使用)
*************************/
/*bxsliderで勝手に設定されるclass*/
.bx-wrapper{
    border: none;        /*枠線を外す*/
    box-shadow: none;        /*枠線シャドウを外す*/
}



/* スライドショー */
#slider {
    overflow:hidden;
    position:relative;
    width:100%;
}
#slider ul{
    height:360px;
}

/*カルーセル用*/
#sliderInner {
    position:relative;
    left:50%;
    width:1000x;
    margin-left:-1520px;
}
#sliderInner ul {
    width:960px;
}

#slideFilterL, #slideFilterR {
    position:relative;
    top:10000;
        bottom:0;
    width:960px;
    height:360px;
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter:"alpha( opacity=80 )";
    background:#fff;
}
#slideFilterL {
    left:0;
        height:360px;
}
#slideFilterR {
    right:0;
        height:360px;
}

.bx-wrapper {
    margin:0 auto;
    position:relative;
}

.bx-wrapper .bx-pager {
    margin:0 auto;
    width:960px;
    background:#fff;
}

.bx-wrapper .bx-prev:hover {
    background-position:0 0;
}

.bx-wrapper .bx-next:hover {
    background-position:-43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position:absolute;
    top:109px;
    outline:0;
    width:32px;
    height:32px;
    text-indent:-9999px;
    z-index:9999;
}

/* ページャー */
.bx-wrapper .bx-pager {
    padding-top:20px;
    text-align:center;
    font-size:.85em;
    font-family:Arial;
    font-weight:bold;
    color:#666;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display:inline-block;
    *zoom:1;
    *display:inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    display:block;
    width:10px;
    height:10px;
    margin:0 5px;
    outline:0;
    text-indent:-9999px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;;
    background:#666;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background:#000;
}

どなたか分かる方いましたらご教授いただきたく思います。
よろしくお願い致します。イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

今回は「作成をあきらめる」という解決方法にしました。
読んでいただきました皆様ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る