ウェブページにスライド画像を追加する方法

私はサイトデザインに取り組んでいます。私はこれも初心者です。私はJavaScriptに慣れていないので、HTMLとCSSを使用して私のWebページにスライド画像を追加したいと思います。画像スライダーを追加するようにお願いします。ありがとうございます:)ウェブページにスライド画像を追加する方法

出典

2017-03-22 Syed Fahad

https://owlcarousel2.github.io/OwlCarousel2/あなたは間違いなく、このためにはJavaScriptが必要 –

。これを試してみてください：http://flickity.metafizzy.co/ –

HTMLとCSSだけを使いたい場合は、このhttps://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/に従ってください。 JavaScriptを使用してみてください、それを学ぶ最も良い方法です – PhilS

これを試すことができます。それは

Demo

出典

2017-03-22 08:01:44

ようこそそうすることが、最も簡単で、おそらく最良の方法

= D Web開発のジャングルにスライド画像を作るために非常に簡単です、ブートストラップを使用することです。あなたが知らない場合は、あなたのウェブページを保持する "グリッド"が固定されています。それは、彼らは偉大なJavaScriptを持っている。また

）=その自由のでresponsivnessと簡単な構成の良いことだ...ああ、とアドオン、カルーセルとして、必要であれば） http://getbootstrap.com/javascript/#carousel

を=を、それをチェックアウトその後

：私はあなたのスキルを知らないと私は、あなたを示唆している最も簡単な方法は、一度DIVにネストされた行のすべての画像をロードすることですので、自分ですべてのような何かをしますCSSでは、幅と高さがすべて同じにすることができます（例：500px幅と500px高さ）。

次に、スライドを上または下に移動するかどうかに応じて、javascriptを使用してdivでの位置を時間またはクリックで制御できます。 divにはCSSオーバーフローがあるはずです：hidden;

しかし、サイズ変更などをする場合などに問題があります。先生が常に言っているように、既に発見されているホイールを発見する必要はありません。 =）

希望する= D

出典

2017-03-22 08:01:49 KeyBi

彼はHTML/CSSのみの解決策を望んでいます –

これはHTMLとCSSのみのスライダです。

.slider-holder 
 
     { 
 
      width: 800px; 
 
      height: 400px; 
 
      background-color: yellow; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      margin-top: 0px; 
 
      text-align: center; 
 
      overflow: hidden; 
 
     } 
 
     
 
     .image-holder 
 
     { 
 
      width: 2400px; 
 
      background-color: red; 
 
      height: 400px; 
 
      clear: both; 
 
      position: relative; 
 
      
 
      -webkit-transition: left 2s; 
 
      -moz-transition: left 2s; 
 
      -o-transition: left 2s; 
 
      transition: left 2s; 
 
     } 
 
     
 
     .slider-image 
 
     { 
 
      float: left; 
 
      margin: 0px; 
 
      padding: 0px; 
 
      position: relative; 
 
     } 
 
     
 
     #slider-image-1:target ~ .image-holder 
 
     { 
 
      left: 0px; 
 
     } 
 
     
 
     #slider-image-2:target ~ .image-holder 
 
     { 
 
      left: -800px; 
 
     } 
 
     
 
     #slider-image-3:target ~ .image-holder 
 
     { 
 
      left: -1600px; 
 
     } 
 
     
 
     .button-holder 
 
     { 
 
      position: relative; 
 
      top: -20px; 
 
     } 
 
     
 
     .slider-change 
 
     { 
 
      display: inline-block; 
 
      height: 10px; 
 
      width: 10px; 
 
      border-radius: 5px; 
 
      background-color: brown; 
 
     }

<!doctype html> 
 
<html> 
 
<head> 
 
    <title>QNimate Slider</title> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <div class="slider-holder"> 
 
     <span id="slider-image-1"></span> 
 
     <span id="slider-image-2"></span> 
 
     <span id="slider-image-3"></span> 
 
     <div class="image-holder"> 
 
      <img src="http://labs.qnimate.com/slider/1.jpg" class="slider-image" /> 
 
      <img src="http://labs.qnimate.com/slider/2.jpg" class="slider-image" /> 
 
      <img src="http://labs.qnimate.com/slider/3.jpg" class="slider-image" /> 
 
     </div> 
 
     <div class="button-holder"> 
 
      <a href="#slider-image-1" class="slider-change"></a> 
 
      <a href="#slider-image-2" class="slider-change"></a> 
 
      <a href="#slider-image-3" class="slider-change"></a> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-03-22 08:49:52

ウェブページにスライド画像を追加する方法

答えて

関連する問題