2017-07-31 6 views
0

私はWordpressでウェブサイトを開発しており、スライドショーの最後にテキストを追加してウェブサイトをよりシンプルにする方法を考えようとしています。このウェブサイトの投稿は私が欲しいと思っています。https://hypebeast.com/2017/7/calvin-klein-flagship-makeoverレスポンススライドショーフォトギャラリーの最後にテキストコンテンツを追加する方法はありますか?

私はスライドショーを「ソース」にしようとしましたが、失敗しました。私は同じ正確なスタイルのスライドが欲しい。

誰でも手助けできますか?

+0

別の偉大な例https://hypebeast.com/2017/7/supreme-tees-sold-k-mart:ここで私は一緒にハッキング最後のスライドのように「テキスト」ページでFlexSliderの実装です-4-usd – Moja

+0

テキストなしの別のものhttps://hypebeast.com/2017/7/diamond-supply-co-moving-speed-of-life-exclusive-collection – Moja

答えて

0

最初に指定した例では、順序付けされていないリスト要素<ul>が使用され、スライドショーに変換されます。この例では、"FlexSlider"というプラグインを使用しています。

<html> 
<head> 
<!-- Place somewhere in the <head> of your document --> 
<link rel="stylesheet" href="flexslider.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="jquery.flexslider.js"></script> 
<!-- Place in the <head>, after the three links --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider(); 
    }); 
</script> 
</head> 
<body> 
<!-- Place somewhere in the <body> of your page --> 
<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" /> 
    </li> 
    <li> 
     <img src="https://static.pexels.com/photos/230629/pexels-photo-230629.jpeg" /> 
    </li> 
    <li> 
     <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" /> 
    </li> 

    <li class="slide related-posts-slide hidden-md hidden-sm hidden-xs flex-active-slide"> 
     <div class="col-xs-12"> 
      <p>You can put all of your content here, and treat it as it's own page.</p> 
     </div> 
    </li> 
    </ul> 
</div> 
</body> 
</html> 
+0

これをjsfiddleやその他のライブサンプルにすることができます? – Moja

+0

@Moja [Here'a jsfiddle。私はプラグインファイルを含めることができませんでしたので、インラインで追加しました](https://jsfiddle.net/2gsm5L9o/) – matthewninja

+0

他の2つを見せてもらえますか? – Moja

関連する問題