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>

avatar suhen
@suhen

40 Kontribusi 2 Poin

Diperbarui 6 tahun yang lalu

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"/>
avatar ciloxz
@ciloxz

284 Kontribusi 139 Poin

Dipost 6 tahun yang lalu

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.

avatar suhen
@suhen

40 Kontribusi 2 Poin

Dipost 6 tahun yang lalu

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 ^^

avatar markeronly
@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

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.

avatar suhen
@suhen

40 Kontribusi 2 Poin

Dipost 6 tahun yang lalu

ganti aj..jangan pake library slider itu.. pake yg lain..kan masih banyak... atau buat sendiri lebih enak ...

avatar ciloxz
@ciloxz

284 Kontribusi 139 Poin

Dipost 6 tahun yang lalu

@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

avatar markeronly
@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

Agan @ciloxz @markeronly,

Siap gan, ini lagi saya cari2 slider yang lain, kalau pake ini jadi sakit kepala. hehehe

avatar suhen
@suhen

40 Kontribusi 2 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

@suhen coba pakai ini gan http://responsiveslides.com

avatar markeronly
@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

Agan @markeronly, ok gan boleh juga nih.

avatar suhen
@suhen

40 Kontribusi 2 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban