ポートフォリオにも役立つ術 Part1

お久しぶりです( ^ω^ )。

ウェブ制作学科卒業しました!

あとは就職のみ(=´∀`)人(´∀`=)

 

って、めっちゃ更新してなかったから、端折りすぎですよね。

でも、全くの未経験でも少しづつ積み重ねて勉強すれば、身につくものもたくさんあるし卒業できるということが証明されました。

なので就活で役立つ作品集(ポートフォリオ)にも役立つ方法を何日かに分け、綴りたいと思います。

今日はbxsliderをご紹介します。

目次

bxsliderってなに?

bxsliderとは?

 

f:id:aki-blog:20160927104118p:plain

f:id:aki-blog:20160927111941p:plain

 

このようにボックスの中の画像が変わることで、動きのあるサイトデザインになります。

こちらのページに飛んでもらうと上記の画面なります。

              ⬇︎

         http://bxslider.com/

              ⬇︎

ダウンロードをします。

          f:id:aki-blog:20160927104831p:plain            

htmlでリンク先を指定します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="/js/jquery.bxslider.min.js"></script>

<link href="/lib/jquery.bxslider.css" rel="stylesheet"/>

次に画像を配置します。

 imagesの部分は自分の画像ホルダーの名前です。

<ul class="bxslider"><font></font>
  <li><img src="/images/pic1.jpg" /></li><font></font>
  <li><img src="/images/pic2.jpg" /></li><font></font>
  <li><img src="/images/pic3.jpg" /></li><font></font>
  <li><img src="/images/pic4.jpg" /></li><font></font>
</ul>

次にbxsliderを呼び出します。

$(document).ready(function(){<font></font>
  $('.bxslider').bxSlider();<font></font>
});

 

         注意点。この時うまく動かないはこちらに気をつけて!

   ダウンロードした、cssの画像指定サイズが、使いたい画像とサイズが違う。

 

  .bx-wrapper {
  position: relative;
  width:800px;
  margin: 0 auto 60px;
  padding: 0;
  *zoom: 1;
  }

     widthは画像の幅サイズを表します。高さは指定してませんが、

     サイズに合わせて変更する必要があります。

     

プラスα

                  ⬇︎

          自動的に画像が動くように指定するには、

  <script>
  $(function(){
  $('.bxslider').bxSlider({
  auto: true,
  slideWidth:768
  });
  });

  </script>

 

        auto:trueと記入すると自動に切り替わります( ^ω^ )

     

       f:id:aki-blog:20160927112425p:plain  皆さんも是非やってみてくださいねf:id:aki-blog:20160927112218p:plain⭐️

 

aki-log.hatenablog.com

 

 

aki-log.hatenablog.com