Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Bagaimana merubah ukuran slider di javascript agar menjadi responsive
Selamat malam agan2, dibawah ini adalah coding js untuk slider, gimana caranya supaya menjadi responsive, karena htmlnya udah terlanjur dibuat tanpa bootstrap dan juga dapat slidernya bukan yang responsive. Width dan Height nya uda saya kutak kutik masih aja gak mau responsive di media ukuran smartphone tetap slidernya pada ukuran 650x450.
$(function() {
$("#number_slideshow").number_slideshow({
slideshow_autoplay: 'enable',//enable disable
slideshow_time_interval: 3000,
slideshow_window_background_color: "#fff",
slideshow_window_padding: '0',
slideshow_window_width: '650', // lebar dlm px
slideshow_window_height: '450',/ tinggi dlm px
slideshow_border_size: '0',
slideshow_transition_speed: 500, //'normal','slow','fast' or numeral
slideshow_border_color: "#f2ffdb",
slideshow_show_button: 'enable',//enable disable
slideshow_show_title: 'disable',//enable disable
slideshow_button_text_color: '#CCC',
slideshow_button_current_text_color: '#000',
slideshow_button_background_color: '#333',
slideshow_button_current_background_color: '#666',
slideshow_button_border_color: '#000',
slideshow_loading_gif: 'loading.gif',//loading pic, you can replace it.
slideshow_button_border_size: '0'
});
});
PHP nya
<div id="slide">
<div id="number_slideshow" class="number_slideshow">
<ul>
<?php
$sql_slider = $link->query("SELECT * FROM slider ORDER BY gambar ASC");
while ($data_slider = $sql_slider->fetch_array(MYSQLI_ASSOC)) {
?><li><a href="#"><img src="img/slider/<?php echo $data_slider['gambar']; ?>" width="650" height="450" alt="slideshow_large"/></a></li><?php
}
?>
</ul>
<ul class="number_slideshow_nav">
<?php
$no = 1;
$sql_slider2 = $link->query("SELECT * FROM slider ORDER BY gambar ASC");
while ($data_slider2 = $sql_slider2->fetch_array(MYSQLI_ASSOC)) {
?><li><a href="#"><?php echo $no; ?></a></li><?php
$no++;
}
?>
</ul>
</div>
</div>
9 Jawaban:
Nah loo ...width dan height nya.. kog statis.. pake class aj.. nanti pake media query...
kalau belum ngeh media query.. cari tutor website responsive di sini...
<img src="img/slider/<?php echo $data_slider['gambar']; ?>" width="650" height="450" alt="slideshow_large"/>
Agan @ciloxz
Sebenernya ukuran ywidth dan height yang di img nya gak ngaruh, kalau dihilangin pun ukurannya ttp ikutan yang ada di dalam javascriptnya.
<img src="img/slider/<?php echo $data_slider['gambar']; ?>" alt="slideshow_large"/>
Ini yang uda saya coba: 1. Merubah menjadi % / menghilangkan ukuran yang ada di img width="650" height="450" 2. Merubah menjadi % slideshow_window_width: '650', slideshow_window_height: '450' ukuran yang di js, slidernya nya malah gak muncul. 3. Menggunakan class di img nya dengan % 4. Menggunakan media query
Semua usaha diatas gak berhasil gan.
3. Menggunakan class di img nya
<img src="img/slider/<?php echo $data_slider['gambar']; ?>" class="slider-js" alt="slideshow_large"/>
4. Menggunakan media query
Buat di css
@media only screen and (max-width: 768px) {
bla bla bla ...
}
Intinya agan bikin breakpoint untuk masing - masing ukuran misal desktop, mobile, etc. Perlu di perhatiin selalu design untuk mobile duluan, atau in english Mobile Design First
Semoga memberikan pencerahan ^^
Agan @markeronly,
Tetap gak mau gan, semua ukuran ikut sesuai dengan @media yang saya mau, kecuali slidernya tetap pada ukuran aslinya, karena pengaturan ukuran slider ada di js nya, jadi pakai class dan @media gak tembus juga.
ganti aj..jangan pake library slider itu.. pake yg lain..kan masih banyak... atau buat sendiri lebih enak ...
@ciloxz haha iyaa nih paling bener agan ini , drpd ribet ngurusin mnding cari lainnya gan..
kalau gak agan buat di codepen/yang lain terus link nya kasih ke sini kali aja mastah @ciloxz berbaik hati mau bantuin hehe
Agan @ciloxz @markeronly,
Siap gan, ini lagi saya cari2 slider yang lain, kalau pake ini jadi sakit kepala. hehehe