###前提・実現したいこと
Swiper.jsを使って
https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
を参考に、サムネール付きの横幅が画面一杯に広がるスライドを作り
各スライドの文字をタイプライターのように、順番に表示させたいです。
###発生している問題・エラーメッセージ
Slide2以降がうまくできません。また、最後のスライドから逆に戻ると、全てSlide4の文字になってしまいます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="docs/favicon.ico"> <link href="docs/dist/css/animate.css" rel="stylesheet"> <title>swiper-test</title> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Swiper core CSS --> <link href="swiper/swiper.min.css" rel="stylesheet"> <!-- Demo styles --> <style> div.container.full { width: 100%; } .swiper-container { width: 100% ; height: 600px!important; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .gallery-top { height: 80%; width: 100%; } .gallery-thumbs { width: 600px; height: 200px !important; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 200px; height: 150px; opacity: 1; } .gallery-thumbs .swiper-slide-active { opacity: 1; } h2.slidetytle { font-size: 200px; color: #ffffff; text-align: center; } h4.caption { color: #ffffff; padding: 10px; background-color: #000000; margin-top: 150px; } <!-- typing --> div.tytlebox { text-align: center !important;} .textSplitLoad { display: none; } .split { visibility: hidden; text-align: center; font-size: 60px; } /* .row.tytle1 { color: #FFFFFF; z-index: 10; position: absolute; top: 200px; left:100px; width: 75%; } */ div.swiper-button-prev.swiper-button-white,div.swiper-button-next.swiper-button-white { margin-top: -240px; } </style> </head> <body> <div class="container full"> <div class="row row-swiper-slide"> <!-- Swiper --> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(img/koro/sample01.jpg);"><h2 class="slidetytle split split1">slide1</h2></div> <div class="swiper-slide" style="background-image:url(img/koro/sample02.jpg);"><h2 class="slidetytle split split2">slide2</h2></div> <div class="swiper-slide" style="background-image:url(img/koro/sample03.jpg);"><h2 class="slidetytle spilt split3">slide3</h2></div> <div class="swiper-slide" style="background-image:url(img/koro/sample04.jpg);"><h2 class="slidetytle split split4">slide4</h2></div> </div> <!--Add Arrows --> </div> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper thumbox" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);" > <div class="swiper-slide smal" style="background-image:url(img/koro/sample01.jpg); positon:top"><h4 class="caption">caption1</h4></div> <div class="swiper-slide smal" style="background-image:url(img/koro/sample02.jpg); positon:top"><h4 class="caption">caption2</h4></div> <div class="swiper-slide smal" style="background-image:url(img/koro/sample03.jpg); positon:top"><h4 class="caption">caption3</h4></div> <div class="swiper-slide smal" style="background-image:url(img/koro/sample04.jpg); positon:top"><h4 class="caption">caption4</h4></div> </div> </div> </div><!--/.row-slide--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ var setElm = $('.split'), delaySpeed = 300, fadeSpeed = 0; setText = setElm.html(); setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){ var elmThis = $(this); if (this.nodeType == 3) { var $this = $(this); $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); } }); $(window).load(function(){ splitLength = $('.textSplitLoad').length; setElm.find('.textSplitLoad').each(function(i){ splitThis = $(this); splitTxt = splitThis.text(); splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); }); setTimeout(function(){ setElm.html(setText); },splitLength*delaySpeed+fadeSpeed); }); }); $(function(){ var setElm = $('.split2'), delaySpeed = 300, fadeSpeed = 0; setText = setElm.html(); setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){ var elmThis = $(this); if (this.nodeType == 3) { var $this = $(this); $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); } }); $(window).load(function(){ splitLength = $('.textSplitLoad').length; setElm.find('.textSplitLoad').each(function(i){ splitThis = $(this); splitTxt = splitThis.text(); splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); }); setTimeout(function(){ setElm.html(setText); },splitLength*delaySpeed+fadeSpeed); }); }); $(function(){ var setElm = $('.split3'), delaySpeed = 300, fadeSpeed = 0; setText = setElm.html(); setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){ var elmThis = $(this); if (this.nodeType == 3) { var $this = $(this); $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); } }); $(window).load(function(){ splitLength = $('.textSplitLoad').length; setElm.find('.textSplitLoad').each(function(i){ splitThis = $(this); splitTxt = splitThis.text(); splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); }); setTimeout(function(){ setElm.html(setText); },splitLength*delaySpeed+fadeSpeed); }); }); $(function(){ var setElm = $('.split4'), delaySpeed = 300, fadeSpeed = 0; setText = setElm.html(); setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){ var elmThis = $(this); if (this.nodeType == 3) { var $this = $(this); $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>')); } }); $(window).load(function(){ splitLength = $('.textSplitLoad').length; setElm.find('.textSplitLoad').each(function(i){ splitThis = $(this); splitTxt = splitThis.text(); splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); }); setTimeout(function(){ setElm.html(setText); },splitLength*delaySpeed+fadeSpeed); }); }); </script> <!-- Swiper --> <script src="swiper/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var galleryTop = new Swiper('.gallery-top', { spaceBetween: 0, direction: 'vertical', navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 0, centeredSlides: true, slidesPerView: '3', touchRatio: 0.2, slideToClickedSlide: true, initialSlide:2, }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop; $(document).on('clicke','.swiper-button-next ',function(){ $(this).css("background","red"); }); </script> </body> </html>
###試したこと
メインの各スライドに、クラスspiltの後にspilt1、spilt2、spilt3、spilt4を付加し、Scriptを上記のように記述しました。
###補足情報(言語/FW/ツール等のバージョンなど)
CSSのみで、実装できればもっといいのですが、
http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/
を参考にやってみましたが、うまくいきませんでした。
回答1件
あなたの回答
tips
プレビュー