小编Ish*_*hio的帖子

我想制作一个看起来像这样的箭头:

但是,这是我能得到的最接近的:

.button {
  margin: 4em 0;
  padding: 2em;
  width: 15%;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  webkit-justify-content: center;
  justify-content: center;
}
.curved-arrow {
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 30px solid #fff;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

<div class="button">
  <div class="curved-arrow"></div>
</div>

这甚至可能吗？我知道我可以使用图像,但是我的设计师在整个网站中使用了多种颜色的几种,我宁愿只使用CSS作为形状.

如果很难看到它在左边从上到下是一条扁平的直线,而在右边的中间是曲线.

我在使用Visual Studio时遇到了问题.我正在使用CSS和HTML,但该程序完成了所有这些突出显示.

这是我正在谈论的一个例子.

我只是想在常用词,括号和语法括号突出显示中关闭突出显示.

我无法在工具 - >选项部分找到它.

我正在开发一个网站，它是根据一个主题构建的。网站正文中的结构为包含导航的左面板 div 和包含正文内容的右面板 div。

当左侧面板从折叠视图（仅显示图标）打开到完整视图（显示导航文本）时，owl-carousel 由于是在页面加载时加载的，因此不会重新调整宽度。

我尝试了几种方法来尝试重新加载轮播，遵循他们的 API，但没有成功。主体没有设置宽度，例如内联样式，而是left-menu-open在左侧菜单打开时设置类。

我还查看了其他几个尝试做同样事情的人的案例，但他们的代码示例都不起作用。

下面是我的代码。我在 .php 文件中运行它，因此我能够在正文内容中加载多个滑块，而无需它们相对旋转。轮播加载并运行良好，只是如果页面在导航打开的情况下加载并且关闭导航，则它开始剪辑，或者如果页面在导航关闭的情况下加载并打开，则第三张幻灯片显示。

我尝试过的一种方法是

if ( $( 'body' ).resize() { }

if ( $( 'body' ).hasClass( 'left-nav-open' ) { } else if ( !$( 'body ').resize() { }

(function($) {
  $(function() {
    var $owl = $('.owl-<?php echo $owl_widget_title; ?>');

    $owl.owlCarousel({
      // your initial option here, again.
      loop:true,
      nav:true,
      navText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"],
      dots: false,
      lazyLoad: true,
      lazyContent: true,
      autoplaySpeed: 1000,
      autoplayTimeout: 7000,
      autoplayHoverPause: true,
      responsive …

当我单击数据点导航中的点时，幻灯片似乎重置为第一张幻灯片。但是，如果我单击fa-circle或 文本上的像素，它会转到相应的幻灯片。我试过观察事件的发生，但我似乎根本无法找出是什么导致了这种情况。

这是我的网站的链接正在进行中

我没有在特别困难的情况下运行任何东西，并且一直在使用和不使用这段代码：

我调用幻灯片元素：

<div class="item" data-dot ="<span><i class='fa fa-circle'></i></span><span><?php _e( $i['description'], 'firkisok' );?></span>">
  Content item stuff happens here
</div>

(function($) {
  $(function() {

    // Call Vars
    var owl = $('.owl-carousel');

    // Setup owlCarousel
    owl.owlCarousel({
      dots: true,
      dotsData: true,
      center: true,
      autoWidth: true,
      smartSpeed: 500,
    });

    $( '.owl-dot' ).on( 'click', function() {
      owl.trigger('to.owl.carousel', [$(this).index(), 300]);
      $( '.owl-dot' ).removeClass( 'active' );
      $(this).addClass( 'active' );
    })
    $( '.owl-dot span .fa-circle' ).on( 'click', function() {
      owl.trigger('to.owl.carousel', [$(this).index(), 300]);
      $( '.owl-dot' …

到目前为止，我已经研究了几个问题，但我所看到的这些问题都没有真正帮助我找到解决方案。

我需要在使用猫头鹰旋转木马的滑块上安装一个计数器。我需要获取当前的幻灯片计数和滑块中的项目数。

问题是，我告诉滑块在到达最后一张幻灯片时循环回到开头。

我看过的一些代码示例可以正常工作，但有一件事除外。看起来 Owl Carousel 在开头添加了 2 个项目，在末尾添加了 2 个项目，并cloned附加了类。这与我一直在使用的代码计数相混淆。

我尝试隔离克隆计数并且可行，但这currentIndex就是我遇到问题的地方。试图让计数准确是行不通的。如果我有 4 张幻灯片，currentIndex则从 3 张开始，一直到 8 张，同时totalItems显示 4 张。

任何帮助表示赞赏！

我正在使用OwlCarousel 2

这是我正在使用的代码：

var = mapSliderOptions = {
        loop: true,
        margin: 0,
        items: 1,
        autoWidth: false,
        mouseDrag: true,
        touchDrag: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter,
        responsive: {
            0: {
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true
            },
            768: {
                autoplay: false,
                items: 1 …