Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (68414 Members, 793 Products, 5353 Topic, 13045 Comments)

slider iklan tidak responsive di mobile dan laptop

Dibuat
Login Terakhir 1 Tahun lalu,
Telah Dilihat 899 Kali
azray kisaran Mengatakan : Sultan Account
  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 !!!

Online