サポート » その他 » スライドされた画像に動きを加えたら不具合が出る

  • 解決済 fumidalat

    (@fumidalat)


    こんにちは
    上記サイトのスライドですが、2枚目と3枚目(左右に動く)に不具合が出ます。ブラウザで他のサイトを見て戻った際など、端が切れたり、動きがおかしかったりします。

    htmlは
    <ul class=”bx-slider”>
    <li class=”zoomUp”>
    <li class=”rl”>
    <li class=”lr”>

    css
    .bx-wrapper {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    background: #fff;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
    }

    @keyframes zoomUp {
    0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    }
    100% {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
    }
    }
    .bxslider > li.zoom-up, .bxslider > li.zoom-up img,
    .bxslider > li.zoom-up[aria-hidden=”false”],
    .bxslider > li.zoom-up[aria-hidden=”true”],
    .bxslider > li.zoom-up[aria-hidden=”false”]:last-child {
    animation: zoomUp 10s linear 0s 1 normal both;
    }
    .bxslider > li.zoom-up img {
    display: block;
    }
    @keyframes rl {
    0% {
    -webkit-transform: scale(1.05) translateX(5%);
    -moz-transform: scale(1.05) translateX(5%);
    -ms-transform: scale(1.05) translateX(5%);
    -o-transform: scale(1.05) translateX(5%);
    transform: scale(1.05) translateX(5%);
    }
    to {
    -webkit-transform: scale(1.05) translateX(0%) ;
    -moz-transform: scale(1.05) translateX(0%) ;
    -ms-transform: scale(1.05) translateX(0%) ;
    -o-transform: scale(1.05) translateX(0%) ;
    transform: scale(1.05) translateX(0%) ;
    }
    }
    .bxslider > li.right-to-left, .bxslider > li.right-to-left img,
    .bxslider > li.right-to-left[aria-hidden=”false”],
    .bxslider > li.right-to-left[aria-hidden=”true”],
    .bxslider > li.right-to-left[aria-hidden=”false”]:last-child {
    animation: rl 20s -6s linear infinite;
    }
    .bxslider > li.left-to-right img {
    display: block;
    }
    @keyframes lr {
    0% {
    -webkit-transform: scale(1.05) translateX(-5%) ;
    -moz-transform: scale(1.05) translateX(-5%) ;
    -ms-transform: scale(1.05) translateX(-5%) ;
    -o-transform: scale(1.05) translateX(-5%) ;
    transform: scale(1.05) translateX(-5%) ;
    }
    to {
    -webkit-transform: scale(1.05) translateX(0%) ;
    -moz-transform: scale(1.05) translateX(0%) ;
    -ms-transform: scale(1.05) translateX(0%) ;
    -o-transform: scale(1.05) translateX(0%) ;
    transform: scale(1.05) translateX(0%) ;
    }
    }
    .bxslider > li.left-to-right, .bxslider > li.left-to-right img,
    .bxslider > li.left-to-right[aria-hidden=”false”],
    .bxslider > li.left-to-right[aria-hidden=”true”],
    .bxslider > li.left-to-right[aria-hidden=”false”]:last-child {
    animation: lr 20s -6s linear infinite;
    }
    .bxslider > li.left-to-right img {
    display: block;
    }

    です。

    よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    スライドの JavaScript や CSS の問題で、WordPress はあまり関係ないようですので、他のフォーラムなどで質問された方が的確な回答を得られると思います。

    また、独自のテーマのようですので、サイトを作成された方に質問されてはどうかと思います。

    トピック投稿者 fumidalat

    (@fumidalat)

    アドバイスありがとうございました。

    そのようにさせていただきます

    一応、解決済みとします

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「スライドされた画像に動きを加えたら不具合が出る」には新たに返信することはできません。