Hai, jumpa lagi dengan saya, kali ini saya akan berbagi tutorial mengenai Cara Membuat Slider Teks Dengan Bootstrap, Kalo kalian sering melihat tampilan gambar slider kali ini saya kan buat teks slider, berikut langkah-langkahnya.
Baik, langsung saja silahkan kalian buat struktur kode HTML berikut pada index bootstrap nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="myPageContent" class="container-fluid"> <section id="home"> <div id="textSlider" class="row"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-4 iamCol"> <p>Eu</p> <p>Sou</p> </div> <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 slideCol"> <div class="scroller"> <div class="inner"> <p>PriscilaCunha</p> <p>Web Developer</p> <p>Web Designer</p> <p>Aprendiz Jedi</p> </div> </div> </div> </div> </section </div> |
Nah, kalo sudah, lanjutkan untuk kode CSS berikut untuk membuat tampilan slide pada teks nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
@import url(http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); @import url(http://fonts.googleapis.com/css?family=Lato:400,300,900); body { background-color: #0096D6; } html, body { width: 100%; height: 100%; margin: 0; } body { font-family:'Lato', sans-serif !important; font-size: 13pt !important; font-weight: 300 !important; } .container-fluid { padding-right: 0px !important; padding-left: 0px !important; } #myPageContent, section { height:100% !important; width:100% !important; } /* Slider */ #textSlider.row { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100% !important; } #textSlider div { color: #FFF; font-family: 'Lato', sans-serif; text-transform: uppercase; } .iamCol { text-align: right; float: left; font-weight: 300; font-size:30pt; } .iamCol p:nth-child(2) { margin-top: -20pt !important; } .slideCol { text-align: left; overflow: hidden; font-weight: 900; font-size:70pt; display: block; white-space: nowrap; } .slideCol p { margin: 0px !important; } .scroller { height: 70pt; line-height: 70pt; overflow: hidden; } .scroller .inner { animation: 10s normal infinite running scroll; } @keyframes scroll { 0% {margin-top: 0px;} 15% {margin-top: 0px;} 25% {margin-top: -70pt;} 40% {margin-top: -70pt;} 50% {margin-top: -140pt;} 65% {margin-top: -140pt;} 75% {margin-top: -210pt;} 90% {margin-top: -210pt;} 100% {margin-top: 0px;} } /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) and (max-width : 479px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:20pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 25pt; text-align: center; margin-top: -20px; } } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) and (max-width : 765px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:25pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 38pt; text-align: center; margin-top: -20px; } } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) and (max-width : 992px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:30pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 50pt; text-align: center; margin-top: 5px; } } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) and (max-width : 1200px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: right; font-size:30pt; } .slideCol { font-size: 55pt; text-align: left; } } |
Kalo sudah semua, simpan dulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai
Baik itu tadi tutorial mengenai Cara Membuat Slider Teks Dengan Bootstrap, semoga bermanfaat, amin.
Selamat mencoba 🙂