スライダーをこう表示したいのですが、
真ん中のひとつしか表示されず、矢印も作動しません。
何度か更新すれば、正しく表示されることもあるのですが、
どこか修正点があれば教えてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0"> <meta name="description" content=""> <title></title> <style type="text/css"> p { color:#666666; } p.ifont { font-family: YuGothic,'Yu Gothic',monospace; line-height:120%; } .btn-flat-border { display: inline-block; padding: 1em 1.5em; text-decoration: none; color: #666666; border: solid 2px #f3d3b8; border-radius: 3px; transition: .4s; } .btn-flat-border:hover { background: #f3d3b8; color: #666666; } .sample-text1 { animation: fadeIn 4s ease 0s 1 normal; -webkit-animation: fadeIn 4s ease 0s 1 normal; } @media screen and (max-width:639px) { img { width: auto; max-width: 100%; height: auto; } table { width: 100%; } h1 { font-size:16px; } h2 { font-size:14px; } span { font-size:12px; line-height:1.9em; letter-spacing:0.1em; } div p { display: inline-block; text-align: left; width: 95% } /* swiperのサイズ */ .swiper-container { width: 100%; height: auto; } } @media screen and (min-width:1024px) { span { line-height:2em; letter-spacing:0.1em; } /* swiperのサイズ */ .swiper-container { width: 1000px; height: 150px; } } .container { font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; text-align: center; padding-top: 40px; } </style> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-140054870-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-140054870-1'); </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.3/css/swiper.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script> </head> <body bgcolor="#ffffff"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> <div class="swiper-slide"><a href="" target="_blank"><img src="" alt=""></a></div> </div> <div class="swiper-button-prev swiper-button-black"></div> <div class="swiper-button-next swiper-button-black"></div> </div> </div> <div class="animation"> <p class="ifont" align="center" > <span style= 'font-size:3'> </div> </td></tr></table> </td></tr></table> </div> <!-- スクロール ふわっと表示 --> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 200){ $(this).addClass('scrollin'); } }); }); }); </script> <!-- ふわっと切り替え --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> jQuery(function($){ $('body').fadeIn(1000); $(window).on("beforeunload",function(e){ $('body').fadeOut(); }); }); </script> <script>document.body.style.display = 'none';</script> <script> $(function() { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); }); </script> <style type="text/css"> <!-- #page-top { position: fixed; bottom: 10px; right: 10px; opacity:0.8; font-size: 40%; z-index: 100; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 15px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } --> </style> <p id="page-top" align="right"><a href=""><font size="3">TOPへ戻る</font></a></p> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .fadeInDown { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } </style> <script> $(function(){ $('.animation').css('visibility','hidden'); $(window).scroll(function(){ var windowHeight = jQuery(window).height(), topWindow = jQuery(window).scrollTop(); $('.animation').each(function(){ var targetPosition = jQuery(this).offset().top; if(topWindow > targetPosition - windowHeight + 70 ){ jQuery(this).addClass("fadeInDown"); } }); }); });</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.3/js/swiper.min.js"></script> <script src="swiper.js"></script> <script> var myswiper = new Swiper('.swiper-container', { loop: true, centeredSlides:true, slidesPerView: 1.7, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 640: { slidesPerView: 3.7, } } }); </script> </body> </html>
あなたの回答
tips
プレビュー