1

Como hago para que cuando le de click a un item del carousel se ubique en el centro del carousel, es decir si le doy click al item derecho que se ubique en el centro, como si hiciera un prev o next, tengo el siguiente codigo:
PD: ver el ejemplo en pantalla completa, estoy usando esta libreria https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Carousel </title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <!-- Libreria externa -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

  <!-- CDN Jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

  <style type="text/css">
    .section_plans {
  padding: 60px 0;
}

.section_plans .content_detail_plan.plan_basic {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.section_plans .content_detail_plan.plan_plus {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.section_plans .content_detail_plan .content_detail_plan_header {
  padding: 30px 50px;
  border-bottom: 1px solid #7773ae;
  text-align: center;
}

.section_plans .content_detail_plan .content_detail_plan_body {
  padding: 20px 30px;
  text-align: center;
}

.section_plans .content_detail_plan .content_detail_plan_body .item_detail {
  margin: 10px 0;
}

.section_plans .content_detail_plan .content_detail_plan_body .btn_register {
  background-color: #58539b;
  padding: 10px 45px;
  border-radius: 30px;
  color: #fff;
  font-family: 'GoogleSans-Bold', 'MyriadPro-Regular', serif;
}


.section_plans .content_row {
  margin-top: 80px;
}

.section_plans .content_detail_plan.plan_recommended .content_detail_plan_header {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding-top: 75px;
}

.section_plans .content_detail_plan.plan_recommended .content_detail_plan_body {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-bottom: 60px;
}

.owl-item.active.center .item .content_detail_plan {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  position: relative;
  top: -45px;
  z-index: 1;
  background-color: red;
}
  </style>

  </head>
  <body>
    <div class="container">
    <section class="page_section section_plans" id="planes">
      <div class="container">
        <h1 class="c-default f-48 text-center">Nuestros Planes</h1>
        <hr class="line line-white">
        <div class="owl-carousel">
          <div class="item">
            <div class="content_detail_plan plan_plus bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN PLUS</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_testimonial text-center">
              <div class="content_detail_plan plan_recommended">
                <div class="content_detail_plan_header bc-primary">
                  <h6 class="c-default">PLAN RECOMENDADO</h6>
                  <h3 class="m-0 c-default">$15.00</h3>
                </div>
                <div class="content_detail_plan_body bc-default">
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">1ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">2ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">3ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">4ra ventaja del paquete</span>
                  </div>
                  <div class="mt-4">
                    <button type="button" class="btn btn_register">Registrar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_detail_plan plan_basic bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN BÁSICO</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>

    <script type="text/javascript">
      $( '.owl-carousel' ).owlCarousel({
        autoplay: false,
        margin: 20,
        items: 1,
        loop: true,
        center: true,
        nav: true,
        navText: [""],
        responsive: {
            0: {
               items:1
            },
            200: {
               items:1
            },
            768: {
               items:3
            }
         }
      });
    </script>
  </body>
</html>

4
  • Mira encontré un ejemplo con la librería que esta implementando: owlcarousel2.github.io/OwlCarousel2/demos/rtl.html
    – ontimond
    Commented el 9 may. 2019 a las 21:28
  • @ontimond Pero lo necesito en mi ejemplo, cuando le de click a uno que lo ubique en el centro.
    – zerokira
    Commented el 9 may. 2019 a las 21:29
  • Consulta, tienes 3 columnas, cada una con sus items, lo que necesitas es que si doy click en cualquier item que se encuentre en la columna de la derecha esta se posicione en el centro? o si le das cli ck a un item de la columna izquierda esta se vaya al centro Commented el 9 may. 2019 a las 21:33
  • @SebastiánMiranda si claro
    – zerokira
    Commented el 9 may. 2019 a las 21:34

1 respuesta 1

3

Puedes hacerlo con JavaScript

$owl.children().each( function( index ) {
  $(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
});

Modifica el data-position cuando hagas clic sobre alguno de los items en pantalla, éste lo centrará automáticamente con

$(document).on('click', '.owl-item>div', function() {
  $owl.trigger('to.owl.carousel', $(this).data( 'position' ) );
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Carousel </title>

  <!-- CDN Bootstrap 4 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  <!-- Libreria externa -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />

  <!-- CDN Jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

  <style type="text/css">
    .section_plans {
      padding: 60px 0;
    }
    
    .section_plans .content_detail_plan.plan_basic {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    
    .section_plans .content_detail_plan.plan_plus {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    }
    
    .section_plans .content_detail_plan .content_detail_plan_header {
      padding: 30px 50px;
      border-bottom: 1px solid #7773ae;
      text-align: center;
    }
    
    .section_plans .content_detail_plan .content_detail_plan_body {
      padding: 20px 30px;
      text-align: center;
    }
    
    .section_plans .content_detail_plan .content_detail_plan_body .item_detail {
      margin: 10px 0;
    }
    
    .section_plans .content_detail_plan .content_detail_plan_body .btn_register {
      background-color: #58539b;
      padding: 10px 45px;
      border-radius: 30px;
      color: #fff;
      font-family: 'GoogleSans-Bold', 'MyriadPro-Regular', serif;
    }
    
    .section_plans .content_row {
      margin-top: 80px;
    }
    
    .section_plans .content_detail_plan.plan_recommended .content_detail_plan_header {
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      padding-top: 75px;
    }
    
    .section_plans .content_detail_plan.plan_recommended .content_detail_plan_body {
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      padding-bottom: 60px;
    }
    
    .owl-item.active.center .item .content_detail_plan {
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
      position: relative;
      top: -45px;
      z-index: 1;
      background-color: red;
    }
  </style>

</head>

<body>
  <div class="container">
    <section class="page_section section_plans" id="planes">
      <div class="container">
        <h1 class="c-default f-48 text-center">Nuestros Planes</h1>
        <hr class="line line-white">
        <div class="owl-carousel">
          <div class="item">
            <div class="content_detail_plan plan_plus bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN PLUS</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_testimonial text-center">
              <div class="content_detail_plan plan_recommended">
                <div class="content_detail_plan_header bc-primary">
                  <h6 class="c-default">PLAN RECOMENDADO</h6>
                  <h3 class="m-0 c-default">$15.00</h3>
                </div>
                <div class="content_detail_plan_body bc-default">
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">1ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">2ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">3ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">4ra ventaja del paquete</span>
                  </div>
                  <div class="mt-4">
                    <button type="button" class="btn btn_register">Registrar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_detail_plan plan_basic bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN BÁSICO</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script type="text/javascript">
    var $owl = $('.owl-carousel');

    $owl.children().each(function(index) {
      $(this).attr('data-position', index); // NB: .attr() instead of .data()
    });
   

    $(document).on('click', '.owl-item>div', function() {
      $owl.trigger('to.owl.carousel', $(this).data('position'));
    });

    $('.owl-carousel').owlCarousel({
      autoplay: false,
      margin: 20,
      items: 1,
      loop: true,
      center: true,
      nav: true,
      navText: [""],
      responsive: {
        0: {
          items: 1
        },
        200: {
          items: 1
        },
        768: {
          items: 3
        }
      }
    });
  </script>
</body>

</html>

Fuente

1
  • 1
    muchas gracias me ha servido mucho
    – zerokira
    Commented el 9 may. 2019 a las 22:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.