Loading
i want to make client logo list horizontaly scroll  
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/connvertex.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/nitor.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/vkmart.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/dmart.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/nobelteck.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/cariq.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/japfa.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/cavotec.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/manisha.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/springct.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/jmj.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/vdlo.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/lokmanya.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/neologic.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/maveric.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/skymoto.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/sanjayhy.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/arvind.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/epps.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/mindtickle.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/secureview.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/iant.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/radio.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/nexant.png" class="img-responsive">  
  •   
  •   
  •   
  • class="item" style="text-align: center;">  
  • class="col-md-2 col-xs-6 col-lg-2">  
  • "#">  
  • "img/project/aarushahomes.png" class="img-responsive">  
  •   
  •   
  •   
  •   

    • 2 Replies

    Know the answer? Post it — somebody with the same question will find it here.

      
  •   
  •   
    • 2)CSS CODE:
    1. /* Slider */  
    2. .slick-slide {  
    3. margin: 0px 20px;  
    4. }  
    5. .slick-slide img {  
    6. width: 100%;  
    7. }  
    8. .slick-slider  
    9. {  
    10. position: relative;  
    11. display: block;  
    12. box-sizing: border-box;  
    13. -webkit-user-select: none;  
    14. -moz-user-select: none;  
    15. -ms-user-select: none;  
    16. user-select: none;  
    17. -webkit-touch-callout: none;  
    18. -khtml-user-select: none;  
    19. -ms-touch-action: pan-y;  
    20. touch-action: pan-y;  
    21. -webkit-tap-highlight-color: transparent;  
    22. }  
    23. .slick-list  
    24. {  
    25. position: relative;  
    26. display: block;  
    27. overflow: hidden;  
    28. margin: 0;  
    29. padding: 0;  
    30. }  
    31. .slick-list:focus  
    32. {  
    33. outline: none;  
    34. }  
    35. .slick-list.dragging  
    36. {  
    37. cursor: pointer;  
    38. cursor: hand;  
    39. }  
    40. .slick-slider .slick-track,  
    41. .slick-slider .slick-list  
    42. {  
    43. -webkit-transform: translate3d(0, 0, 0);  
    44. -moz-transform: translate3d(0, 0, 0);  
    45. -ms-transform: translate3d(0, 0, 0);  
    46. -o-transform: translate3d(0, 0, 0);  
    47. transform: translate3d(0, 0, 0);  
    48. }  
    49. .slick-track  
    50. {  
    51. position: relative;  
    52. top: 0;  
    53. left: 0;  
    54. display: block;  
    55. }  
    56. .slick-track:before,  
    57. .slick-track:after  
    58. {  
    59. display: table;  
    60. content: '';  
    61. }  
    62. .slick-track:after  
    63. {  
    64. clear: both;  
    65. }  
    66. .slick-loading .slick-track  
    67. {  
    68. visibility: hidden;  
    69. }  
    70.   
    71. .slick-slide  
    72. {  
    73. display: none;  
    74. float: left;  
    75. height: 100%;  
    76. min-height: 1px;  
    77. }  
    78. [dir='rtl'] .slick-slide  
    79. {  
    80. float: right;  
    81. }  
    82. .slick-slide img  
    83. {  
    84. display: block;  
    85. }  
    86. .slick-slide.slick-loading img  
    87. {  
    88. display: none;  
    89. }  
    90. .slick-slide.dragging img  
    91. {  
    92. pointer-events: none;  
    93. }  
    94. .slick-initialized .slick-slide  
    95. {  
    96. display: block;  
    97. }  
    98. .slick-loading .slick-slide  
    99. {  
    100. visibility: hidden;  
    101. }  
    102. .slick-vertical .slick-slide  
    103. {  
    104. display: block;  
    105. height: auto;  
    106. border: 1px solid transparent;  
    107. }  
    108. .slick-arrow.slick-hidden {  
    109. display: none;  
    110. }  
    111. /*media queries*/  
    112. /* ----------- Galaxy S3 ----------- */  
    113. /* Portrait and Landscape */  
    114. @media screen  
    115. and (device-width: 360px)  
    116. and (device-height: 640px)  
    117. and (-webkit-device-pixel-ratio: 2) {  
    118. }  
    119. /* Portrait */  
    120. @media screen  
    121. and (device-width: 320px)  
    122. and (device-height: 640px)  
    123. and (-webkit-device-pixel-ratio: 2)  
    124. and (orientation: portrait) {  
    125. }  
    126. /* Landscape */  
    127. @media screen  
    128. and (device-width: 320px)  
    129. and (device-height: 640px)  
    130. and (-webkit-device-pixel-ratio: 2)  
    131. and (orientation: landscape) {  
    132.   
    133. }  
    134. /* ----------- Galaxy S4, S5 and Note 3 ----------- */  
    135. /* Portrait and Landscape */  
    136. @media screen  
    137. and (device-width: 320px)  
    138. and (device-height: 640px)  
    139. and (-webkit-device-pixel-ratio: 3) {  
    140. }  
    141. /* Portrait */  
    142. @media screen  
    143. and (device-width: 320px)  
    144. and (device-height: 640px)  
    145. and (-webkit-device-pixel-ratio: 3)  
    146. and (orientation: portrait) {  
    147.   
    148. }  
    149. /* Landscape */  
    150. @media screen  
    151. and (device-width: 320px)  
    152. and (device-height: 640px)  
    153. and (-webkit-device-pixel-ratio: 3)  
    154. and (orientation: landscape) {  
    155.   
    156. }  
    157. /* ----------- Galaxy S6 ----------- */  
    3)js code:
    1. (function($) {  
    2. "use strict";  
    3. //Hide Loading Box (Preloader)  
    4. $(window).on('load',function(){  
    5. var pre_loader = $('.preloader')  
    6. pre_loader.fadeOut('slow',function(){$(this).remove();});  
    7. });  
    8. //Update header style + Scroll to Top  
    9. $(window).on('scroll', function() {  
    10. if ($(window).scrollTop() > 117) {  
    11. $('.header-main').addClass('fixed-header');  
    12. $('.scroll-to-top').fadeIn(300);  
    13. } else {  
    14. $('.header-main').removeClass('fixed-header');  
    15. $('.scroll-to-top').fadeOut(300);  
    16. }  
    17. });  
    18. //Submenu Dropdown Toggle  
    19. if($('.header-main li.dropdown ul').length){  
    20. $('.header-main li.dropdown').append('
    ');  
  • //Dropdown Button  
  • $('.header-main li.dropdown .dropdown-btn').on('click', function() {  
  • $(this).prev('ul').slideToggle(500);  
  • });  
  • //Disable dropdown parent link  
  • $('.navigation li.dropdown > a').on('click', function(e) {  
  • e.preventDefault();  
  • });  
  • }  
  •   
  • //Accordion Box  
  • if ($('.accordion-block').length) {  
  • $('.accordion-block .accordion-btn').on('click', function() {  
  • if ($(this).hasClass('active') !== true) {  
  • $('.accordion-block .accordion-btn').removeClass('active');  
  • }  
  • if ($(this).next('.accordion-description').is(':visible')) {  
  • $(this).removeClass('active');  
  • $(this).next('.accordion-description').slideUp(500);  
  • } else {  
  • $(this).addClass('active');  
  • $('.accordion-block .accordion-description').slideUp(500);  
  • $(this).next('.accordion-description').slideDown(500);  
  • }  
  • });  
  • }  
  •   
  • // Scroll to a Specific Div  
  • if($('.scroll-to-target').length){  
  • $(".scroll-to-target").on('click', function() {  
  • var target = $(this).attr('data-target');  
  • // animate  
  • $('html, body').animate({  
  • scrollTop: $(target).offset().top  
  • }, 1000);  
  • });  
  • }  
  •   
  • //gallery-slider-area  
  • $('.gallery-slider-area').owlCarousel({  
  • loop:true,  
  • margin:15,  
  • nav:true,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 400:{  
  • items:2  
  • },  
  • 600:{  
  • items:3  
  • },  
  • 800:{  
  • items:4  
  • },  
  • 1200:{  
  • items:5  
  • }  
  • }  
  • });  
  • // partner-slider  
  • $('.partner-slider').owlCarousel({  
  • loop:true,  
  • margin:20,  
  • nav:true,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 400:{  
  • items:1  
  • },  
  • 600:{  
  • items:2  
  • },  
  • 800:{  
  • items:3  
  • },  
  • 1200:{  
  • items:5  
  • }  
  • }  
  • });  
  •   
  • //Four Column Carousel Slider  
  • $('.four-column-carousel').owlCarousel({  
  • loop:true,  
  • margin:30,  
  • nav:true,  
  • smartSpeed: 2000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 600:{  
  • items:2  
  • },  
  • 800:{  
  • items:3  
  • },  
  • 1070:{  
  • items:4  
  • }  
  • }  
  • });  
  • //Two Column Carousel Slider  
  • $('.two-column-carousel').owlCarousel({  
  • loop:true,  
  • margin:30,  
  • nav:true,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 480:{  
  • items:1  
  • },  
  • 600:{  
  • items:1  
  • },  
  • 800:{  
  • items:2  
  • },  
  • 1024:{  
  • items:2  
  • }  
  • }  
  • });  
  •   
  • //Three Column Carousel Slider  
  • $('.three-column-carousel').owlCarousel({  
  • loop:true,  
  • margin:30,  
  • nav:true,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 480:{  
  • items:1  
  • },  
  • 600:{  
  • items:2  
  • },  
  • 800:{  
  • items:2  
  • },  
  • 1024:{  
  • items:3  
  • }  
  • }  
  • });  
  • //testimonial-slider-area  
  • $('.testimonial-slider-area').owlCarousel({  
  • loop:true,  
  • margin:30,  
  • nav:true,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 480:{  
  • items:1  
  • },  
  • 600:{  
  • items:2  
  • },  
  • 800:{  
  • items:2  
  • },  
  • 1024:{  
  • items:3  
  • }  
  • }  
  • });  
  • //team-slider-area  
  • $('.team-slider-area').owlCarousel({  
  • loop:true,  
  • margin:30,  
  • nav:true,  
  • dots:false,  
  • smartSpeed: 3000,  
  • autoplay: 4000,  
  • navText: [ '', '' ],  
  • responsive:{  
  • 0:{  
  • items:1  
  • },  
  • 480:{  
  • items:1  
  • },  
  • 600:{  
  • items:2  
  • },  
  • 800:{  
  • items:2  
  • },  
  • 1024:{  
  • items:4  
  • }  
  • }  
  • });  
  •   
  • // Search Toggle Btn  
  • if($('.toggle-search').length){  
  • $('.toggle-search').on('click', function() {  
  • $('.header-search-area').slideToggle(300);  
  • });  
  • }  
  •   
  • //Custom Seclect Box  
  • if($('.custom-select-box').length){  
  • $('.custom-select-box').selectmenu().selectmenu('menuWidget').addClass('overflow');  
  • }  
  • //LightBox / Fancybox  
  • if($('.lightbox-image').length) {  
  • $('.lightbox-image').fancybox({  
  • openEffect : 'elastic',  
  • closeEffect : 'elastic',  
  • helpers : {  
  • media : {}  
  • }  
  • });  
  • }  
  • //=== Contact Form Validation ===  
  • if($("#contact-form").length){  
  • $("#contact-form").validate({  
  • submitHandler: function(form) {  
  • var form_btn = $(form).find('button[type="submit"]');  
  • var form_result_div = '#form-result';  
  • $(form_result_div).remove();  
  • form_btn.before('');  
  • var form_btn_old_msg = form_btn.html();  
  • form_btn.html(form_btn.prop('disabled', true).data("loading-text"));  
  • $(form).ajaxSubmit({  
  • dataType: 'json',  
  • success: function(data) {  
  • if( data.status == 'true' ) {  
  • $(form).find('.form-control').val('');  
  • }  
  • form_btn.prop('disabled', false).html(form_btn_old_msg);  
  • $(form_result_div).html(data.message).fadeIn('slow');  
  • setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);  
  • }  
  • });  
  • }  
  • });  
  • }  
  •   
  • // Fact Counter  
  • $(window).on('scroll', function() {  
  • if($('.fun-fact-counter').length){  
  • $('.fun-fact-counter .column.animated').each(function() {  
  • var $t = $(this),  
  • n = $t.find(".count-text").attr("data-stop"),  
  • r = parseInt($t.find(".count-text").attr("data-speed"), 10);  
  • if (!$t.hasClass("counted")) {  
  • $t.addClass("counted");  
  • $({  
  • countNum: $t.find(".count-text").text()  
  • }).animate({  
  • countNum: n  
  • }, {  
  • duration: r,  
  • easing: "linear",  
  • step: function() {  
  • $t.find(".count-text").text(Math.floor(this.countNum));  
  • },  
  • complete: function() {  
  • $t.find(".count-text").text(this.countNum);  
  • }  
  • });  
  • }  
  • });  
  • }  
  • });  
  • // Scroll to a Specific Div  
  • if($('.scroll-to-target').length){  
  • $(".scroll-to-target").on('click', function() {  
  • var target = $(this).attr('data-target');  
  • // animate  
  • $('html, body').animate({  
  • scrollTop: $(target).offset().top  
  • }, 10);  
  • });  
  • }  
  •   
  • // Elements Animation  
  • if($('.wow').length){  
  • var wow = new WOW(  
  • {  
  • boxClass: 'wow', // animated element css class (default is wow)  
  • animateClass: 'animated', // animation css class (default is animated)  
  • offset: 0, // distance to the element when triggering the animation (default is 0)  
  • mobile: false, // trigger animations on mobile devices (default is true)  
  • live: true // act on asynchronously loaded content (default is true)  
  • }  
  • );  
  • wow.init();  
  • }  
  •   
  • })(window.jQuery);  
    • please suggest me sir, how to make that part responsive using media query..
  • Piyush Pansuriya

    Piyush PansuriyaPosted Jan 31, 2020, 7:05 AM

    Hi Nikita,
    Here is the example of Marqee. Please go through these
    https://www.w3schools.in/html-tutorial/marquee-tag/
     
    https://www.quackit.com/html/codes/html_marquee_code.cfm
     
    it may helps you.