2023年2月8日 18:03:31go评论59阅读模式

英文:

Owl Carousel card not centered

问题

我在我的网站上遇到了一个问题，无法使我的猫头鹰走马灯居中显示。我已经实现了猫头鹰走马灯，用于在我的落地页上显示客户的推荐。然而，走马灯似乎稍微偏向右侧，并且与推荐标题不对齐。我尝试了各种解决方案，如调整走马灯的宽度，仔细检查HTML是否有任何错误，甚至重写JS，但这些解决方案似乎都不起作用。有人能帮我找出是什么原因导致了这个问题，以及如何在我的网站上正确居中猫头鹰走马灯吗？

英文:

I am having trouble getting my owl carousel to be centered on my website. I have implemented the owl carousel to display testimonials from customers on my landing page. However, the carousel seems to be slightly off to the right and not straight with the testimonial title. I have tried various solutions, such as adjusting the width of the carousel, double checking the HTML for any errors, and even rewriting the JS, but none of these solutions seem to work. Can anyone help me figure out what's causing this issue and how to properly center the owl carousel on my website?

this is my code :

.owl-item.center .testimonial-card {
            transform: scale(0.8);
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
        }
        
        .testimonial-card {
            width: 500px;
            padding: 20px;
            display: flex;
            flex-direction: row;
            border-radius: 20px;
            background: white;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
            text-align: center;
            align-content: space-evenly;
            justify-content: center;
            transform: scale(0.5);
            transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
        }
        
        .testimonial-content {
            display: flex;
            flex-direction: column;
        }
        
        .testi-img {
            width: 100%;
            height: 100%;
            position: relative;
        }

.testi-title {
            background-color: #FFF;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
            text-align: center;
            border-radius: 40px;
            margin-top: 30px;
            padding: 30px;
            width: 40%;
            margin-inline: auto;
            font-weight: bold;
        }

  $(&quot;.owl-testimonials&quot;).owlCarousel({
        loop: true,
        item: 3,
        startPosition: 1,
        center: true,
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,

    });

&lt;div class=&quot;testi-title&quot;&gt; Testimonial&lt;/div&gt;
    &lt;section class=&quot;owl-carousel owl-testimonials&quot;&gt;
        &lt;div class=&quot;testimonial-card&quot;&gt;
            &lt;img class=&quot;testi-img&quot; src=&quot;images/team/team2.jpg&quot; alt=&quot;Testimonial 1&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;testimonial-card&quot;&gt;

            &lt;img class=&quot;testi-img&quot; src=&quot;images/team/team1.jpg&quot; alt=&quot;Testimonial 2&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;testimonial-card&quot;&gt;

            &lt;img class=&quot;testi-img&quot; src=&quot;images/team/team3.jpg&quot; alt=&quot;Testimonial 3&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;

答案1

得分: 0

这个问题是因为您在 .testimonial-card 类上声明了固定宽度。如果您将 width:500px 更新为 100%，它将修复这个问题。您还可以检查这个代码片段来获取解决方案。

.testimonial-card {
  width: 100%;
  /* 其他样式 */
}

请点击以下链接查看解决方案：https://codepen.io/salmanaabir/pen/vYawZYb

英文:

This issue was created because you decleared fixed width on .testimonial-card class. If you update the width:500px to 100% it will fix the issue.
You can check the pen also to get the solution.
https://codepen.io/salmanaabir/pen/vYawZYb

$( document ).ready(function() {
    $(&quot;.owl-testimonials&quot;).owlCarousel({
        loop: true,
        item: 3,
        startPosition: 1,
        center: true,
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,

    });
});

.owl-item.center .testimonial-card {
  transform: scale(0.8);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}

.testimonial-card {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;
  align-content: space-evenly;
  justify-content: center;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.testimonial-content {
  display: flex;
  flex-direction: column;
}

.testi-img {
  width: 100%;
  height: 100%;
  position: relative;
}

.testi-title {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  text-align: center;
  border-radius: 40px;
  margin-top: 30px;
  padding: 30px;
  width: 40%;
  margin-inline: auto;
  font-weight: bold;
}

&lt;link rel=&quot;stylesheet&quot; href=&#39;https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css&#39; /&gt;
&lt;div class=&quot;testi-title&quot;&gt; Testimonial&lt;/div&gt;
    &lt;section class=&quot;owl-carousel owl-testimonials&quot;&gt;
        &lt;div class=&quot;testimonial-card&quot;&gt;
            &lt;img class=&quot;testi-img&quot; src=&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&amp;usqp=CAU&quot; alt=&quot;Testimonial 1&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;testimonial-card&quot;&gt;

            &lt;img class=&quot;testi-img&quot; src=&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&amp;usqp=CAU&quot; alt=&quot;Testimonial 2&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;testimonial-card&quot;&gt;

            &lt;img class=&quot;testi-img&quot; src=&quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&amp;usqp=CAU&quot; alt=&quot;Testimonial 3&quot;&gt;
            &lt;div class=&quot;testimonial-content&quot;&gt;
                &lt;span class=&quot;date&quot;&gt;1 days ago&lt;/span&gt;
                &lt;h4&gt;Testimonial One&lt;/h4&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    &lt;script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js&#39;&gt;&lt;/script&gt;
    &lt;script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js&#39;&gt;&lt;/script&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Owl Carousel 卡片未居中。

问题

答案1

如何使用JavaScript中的$.ajax保存zip二进制数据。

JavaScript将字符串转换为数组

无法在带有Typescript的Next.js项目中运行Cypress open命令。

将值从控制器传递到模板并动态添加一个数字。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论