ejemplo de código simple carrusel logo w3schools

Te damos la bienvenida a proyecto on line, aquí vas a hallar la solucíon de lo que estás buscando.

Ejemplo: deslizador de carrusel de logotipo html

______________________________________________________________________________
HTML: 
______________________________________________________________________________
<divclass="container"><sectionclass="customer-logos slider"><divclass="slide"><imgsrc="images/image1.png">div><divclass="slide"><imgsrc="images/image2.png">div><divclass="slide"><imgsrc="images/image3.png">div><divclass="slide"><imgsrc="images/image4.png">div><divclass="slide"><imgsrc="images/image5.png">div><divclass="slide"><imgsrc="images/image6.png">div><divclass="slide"><imgsrc="images/image7.png">div><divclass="slide"><imgsrc="images/image8.png">div>section>div>

______________________________________________________________________________
CSS:
______________________________________________________________________________

.customer-logos 
  background-color: #111;


/* Slider */
.slick-slide 
    margin: 0px 20px;


.slick-slide img 
    width: 100%;


.slick-slider

    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;


.slick-list

    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;

.slick-list:focus

    outline: none;

.slick-list.dragging

    cursor: pointer;
    cursor: hand;


.slick-slider .slick-track,
.slick-slider .slick-list

    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);


.slick-track

    position: relative;
    top: 0;
    left: 0;
    display: block;

.slick-track:before,
.slick-track:after

    display: table;
    content: '';

.slick-track:after

    clear: both;

.slick-loading .slick-track

    visibility: hidden;


.slick-slide

    display: none;
    float: left;
    height: 100%;
    min-height: 1px;

[dir='rtl'] .slick-slide

    float: right;

.slick-slide img

    display: block;

.slick-slide.slick-loading img

    display: none;

.slick-slide.dragging img

    pointer-events: none;

.slick-initialized .slick-slide

    display: block;

.slick-loading .slick-slide

    visibility: hidden;

.slick-vertical .slick-slide

    display: block;
    height: auto;
    border: 1px solid transparent;

.slick-arrow.slick-hidden 
    display: none;


_______________________________________________________________________________
Javascript:
______________________________________________________________________________

$(document).ready(function()
			$('.customer-logos').slick(
				slidesToShow: 4,
				slidesToScroll: 1,
				autoplay: true,
				autoplaySpeed: 1000,
				arrows: false,
				dots: false,
					pauseOnHover: false,
					responsive: [
					breakpoint: 768,
					settings: 
						slidesToShow: 3
					
				, 
					breakpoint: 520,
					settings: 
						slidesToShow: 2
					
				]
			);
		);

Sección de Reseñas y Valoraciones

Si haces scroll puedes encontrar las crónicas de otros creadores, tú asimismo tienes la habilidad dejar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador