Haloo! Selamat Datang di Komunitas Private Training Web Development (55396 Members, 632 Products, 4436 Topic, 11754 Comments)

Butuh karyawan baru? atau seorang Web Developer (Part-time/Freelance/Full-time), cari disini : Members Area Jobs!

slider iklan tidak responsive di mobile dan laptop

Dibuat
Login Terakhir 18 Jam lalu,
Telah Dilihat 40 Kali
azray kisaran Mengatakan : Premium
  1. Assalamualaikum Warahmatullahi Wabarakatuh...mas robi. gimana caranya supaya slider iklan di marketplace bisa responsive di mobile dan di laptop? saya coba script yang mas rekomendasikan tidak responsive mas. mohon solusinya mas
  2.  
  3.  
  4. <div id="jssor_1" class='jssor_1'>
  5. <!-- Loading Screen -->
  6. <div data-u="loading" class='loading'>
  7. <div class='slide1'></div>
  8. <div class='slide2'></div>
  9. </div>
  10. <div data-u="slides" class='slides'>
  11. <?php
  12. $slide1 = $this->model_app->view_ordering_limit('iklanatas','id_iklanatas','ASC',0,5);
  13. $no=1;
  14. foreach ($slide1->result_array() as $row) {
  15. if ($row['gambar'] ==''){ $foto_slide = 'no-image.jpg'; }else{ $foto_slide = $row['gambar']; }
  16. if (strlen($row['judul']) > 40){ $judul = substr($row['judul'],0,40).',..'; }else{ $judul = $row['judul']; }
  17. echo "<div>
  18. <img data-u='image' src='".base_url()."asset/foto_iklanatas/$foto_slide'/>
  19.  
  20. <div data-u='thumb'><a style='color:#fff' href='$row[url]'>$judul</a></div>
  21. </div>";
  22. $no++;
  23. }
  24. ?>
  25. </div>
  26. <!-- Thumbnail Navigator -->
  27. <div data-u="thumbnavigator" class="jssort09-600-45">
  28. <div class="slide3"></div>
  29. <!-- Thumbnail Item Skin Begin -->
  30. <div data-u="slides" style="cursor: default;">
  31. <div data-u="prototype" class="p">
  32. <div data-u="thumbnailtemplate" class="t"></div>
  33. </div>
  34. </div>
  35. <!-- Thumbnail Item Skin End -->
  36. </div>
  37. <!-- Bullet Navigator -->
  38. <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
  39. <div data-u="prototype" style="width:12px;height:12px;"></div>
  40. </div>
  41. <!-- Arrow Navigator -->
  42. <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
  43. <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
  44. </div>
  45.  
  46. <br>
  47.  
  48. <?php
  49. $no = 1;
  50. foreach ($kategori->result_array() as $kat) {
  51. $produk = $this->model_reseller->produk_perkategori(0,0,$kat['id_kategori_produk'],8);
  52. echo "<p class='sidebar-title text-danger produk-title'>$kat[nama_kategori]</p>
  53. <div class='container'>";
  54. foreach ($produk->result_array() as $row){
  55. $ex = explode(';', $row['gambar']);
  56. if (trim($ex[0])==''){ $foto_produk = 'no-image.png'; }else{ $foto_produk = $ex[0]; }
  57. if (strlen($row['nama_produk']) > 38){ $judul = substr($row['nama_produk'],0,38).',..'; }else{ $judul = $row['nama_produk']; }
  58. $jual = $this->model_reseller->jual_reseller($row['id_reseller'],$row['id_produk'])->row_array();
  59. $beli = $this->model_reseller->beli_reseller($row['id_reseller'],$row['id_produk'])->row_array();
  60. if ($beli['beli']-$jual['jual']<=0){ $stok = '<b style="color:#000">Stok Habis</b>'; }else{ $stok = "<span style='color:green'>Stok ".($beli['beli']-$jual['jual'])." $row[satuan]</span>"; }
  61.  
  62. $disk = $this->model_app->view_where("rb_produk_diskon",array('id_produk'=>$row['id_produk']))->row_array();
  63. $diskon = rupiah(($disk['diskon']/$row['harga_konsumen'])*100,0)."%";
  64. if ($diskon>0){ $diskon_persen = "<div class='top-right'>$diskon</div>"; }else{ $diskon_persen = ''; }
  65. if ($diskon>=1){
  66. $harga = "<del style='color:#8a8a8a'><small>Rp ".rupiah($row['harga_konsumen'])."</small></del> Rp ".rupiah($row['harga_konsumen']-$disk['diskon']);
  67. }else{
  68. $harga = "Rp ".rupiah($row['harga_konsumen']);
  69. }
  70. echo "<div class='produk col-md-2 col-xs-6'>
  71. <center>
  72.  
  73. <div style='height:140px; overflow:hidden'>
  74. <a title='$row[nama_produk]' href='".base_url()."produk/detail/$row[produk_seo]'><img style=' min-height:140px; width:100%' src='".base_url()."asset/foto_produk/$foto_produk'></a>
  75. $diskon_persen
  76. </div>
  77. <h4 class='produk-title'><a title='$row[nama_produk]' href='".base_url()."produk/detail/$row[produk_seo]'>$judul</a></h4>
  78. <span class='harga'>$harga</span><br>
  79. <i>$stok</i>
  80. <br><small>$row[nama_kota]</small>";
  81.  
  82. echo "</center>
  83. </div>";
  84.  
  85.  
  86. }
  87. echo "</div>";
  88.  
  89. echo "<div style='clear:both'><br></div>";
  90.  
  91. $no++;
  92.  
  93. }
  94. ?>
  95. <br><br>
  96. <div class="block">
  97. <div class="block-content">
  98. <ul class="article-block-big">
  99. <?php
  100. $no = 1;
  101. $hot = $this->model_utama->view_join_two('berita','users','kategori','username','id_kategori',array('utama' => 'Y','status' => 'Y'),'id_berita','DESC',0,6);
  102. foreach ($hot->result_array() as $row) {
  103. $total_komentar = $this->model_utama->view_where('komentar',array('id_berita' => $row['id_berita']))->num_rows();
  104. $tgl = tgl_indo($row['tanggal']);
  105. echo "<li style='width:180px'>
  106. <div class='article-photo'>
  107. <a href='".base_url()."$row[judul_seo]' class='hover-effect'>";
  108. if ($row['gambar'] ==''){
  109. echo "<a class='hover-effect' href='".base_url()."$row[judul_seo]'><img style='height:110px; width:200px' src='".base_url()."asset/foto_berita/no-image.jpg' alt='' /></a>";
  110. }else{
  111. echo "<a class='hover-effect' href='".base_url()."$row[judul_seo]'><img style='height:110px; width:200px' src='".base_url()."/asset/foto_berita/$row[gambar]' alt='' /></a>";
  112. }
  113. echo "</a>
  114. </div>
  115. <div class='article-content'>
  116. <h4><a href='".base_url()."$row[judul_seo]'>$row[judul]</a><a href='".base_url()."$row[judul_seo].html' class='h-comment'>$total_komentar</a></h4>
  117. <span class='meta'>
  118. <a href='".base_url()."$row[judul_seo]'><span class='icon-text'>🕔</span>$row[jam], $tgl</a>
  119. </span>
  120. </div>
  121. </li>";
  122. }
  123.  
  124.  
  125.  
  126. echo"<div class='row'>";
  127.  
  128. $kategori_button = $this->db->query("SELECT * FROM rb_kategori_produk ORDER BY RAND() DESC LIMIT 30");
  129. foreach ($kategori_button->result_array() as $rows) {
  130. echo "<div class='col-md-3 col-xs-6' style='margin-bottom:5px'><a style='border-radius:0px; text-align:left' class='btn btn-block btn-primary' href='".base_url()."produk/kategori/$rows[kategori_seo]'> $rows[nama_kategori]</a></div>";
  131.  
  132.  
  133. }
  134. echo "</div><hr>";
  135.  
  136.  
  137.  
  138.  
  139.  
  140. ?>
  141. </ul>
  142.  
  143.  
  144.  
  145. </div>
  146. </div>
  147.  
  148.  

Ada 1 Jawaban

PHPMU.COM Support
commented on 28 Jun 2020 08:25:04
  1. Assalamualaikum,.. Pahami dulu script yang saya kasih sebelumnya mas,
  2. untuk slider scriptnya hanya yang bagian paling atas, yang ini :
  3. <div id="jssor_1" class='jssor_1'>
  4. <!-- Loading Screen -->
  5. <div data-u="loading" class='loading'>
  6. <div class='slide1'></div>
  7. <div class='slide2'></div>
  8. </div>
  9. <div data-u="slides" class='slides'>
  10. <?php
  11. $slide1 = $this->model_app->view_ordering_limit('iklanatas','id_iklanatas','ASC',0,5);
  12. $no=1;
  13. foreach ($slide1->result_array() as $row) {
  14. if ($row['gambar'] ==''){ $foto_slide = 'no-image.jpg'; }else{ $foto_slide = $row['gambar']; }
  15. if (strlen($row['judul']) > 40){ $judul = substr($row['judul'],0,40).',..'; }else{ $judul = $row['judul']; }
  16. echo "<div>
  17. <img data-u='image' src='".base_url()."asset/foto_iklanatas/$foto_slide'/>
  18.  
  19. <div data-u='thumb'><a style='color:#fff' href='$row[url]'>$judul</a></div>
  20. </div>";
  21. $no++;
  22. }
  23. ?>
  24. </div>
  25. <!-- Thumbnail Navigator -->
  26. <div data-u="thumbnavigator" class="jssort09-600-45">
  27. <div class="slide3"></div>
  28. <!-- Thumbnail Item Skin Begin -->
  29. <div data-u="slides" style="cursor: default;">
  30. <div data-u="prototype" class="p">
  31. <div data-u="thumbnailtemplate" class="t"></div>
  32. </div>
  33. </div>
  34. <!-- Thumbnail Item Skin End -->
  35. </div>
  36. <!-- Bullet Navigator -->
  37. <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
  38. <div data-u="prototype" style="width:12px;height:12px;"></div>
  39. </div>
  40. <!-- Arrow Navigator -->
  41. <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
  42. <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
  43. </div>
  44.  
  45. Cara Agar responsive di Desktop, buka file :
  46. C:\xampp\htdocs\marketplace\template\phpmu-tigo\slide\js\slide.js
  47. lalu cari baris :
  48. refSize = Math.min(refSize, 600);
  49.  
  50. ubah menjadi :
  51. refSize = Math.min(refSize, 1200);
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!