Модернизация пользовательской карусели для включения навигационных точек

Question

Мы унаследовали пользовательский компонент карусели, который требует добавления навигационных точек при просмотре на планшете и мобильном устройстве. Все три слайда видны на рабочем столе, поэтому точки не нужны. Среда — Bootstrap 3.3.7, доступен SwiperJS. Как мы можем добавить точки навигации под слайдами? Есть ли простой способ модифицировать это с помощью SwiperJS? Есть ли простой способ Bootstrap 3.3.7 модифицировать это?

Здесь

;
(function($, window, document, undefined) {
  let PLANS_PRICE = {
    elite: [85, 75, 60, 50, 45, 40, 40, 40, 40, 40],
    performance: [75, 65, 50, 40, 35, 35, 35, 35, 35, 35],
    starter: [65, 60, 45, 35, 30, 30, 30, 30, 30, 30]
  };
  var counter = (function() {
    let count = 6;
    let minValue = 1;
    let maxValue = 10;
    let countStat = {
      increment: () => {
        return count < maxValue ? ++count : count;
      },
      decrement: () => {
        return count > minValue ? --count : count;
      },
      get() {
        return count;
      }
    };
    return countStat;
  })();

  let counterDisplayElem = document.querySelector(".counter-display");
  let counterMinusElem = document.querySelector(".counter-minus");
  let counterPlusElem = document.querySelector(".counter-plus");

  let elitePlanSelector = $(".elite-plan .plan-price");
  let performancePlanSelector = $(".performance-plan .plan-price");
  let starterPlanSelector = $(".starter-plan .plan-price");
  let counterDisplayText = $(".lines_count");

  function updateDisplay() {
    let count = counter.get();
    counterDisplayElem.innerHTML = count;
    const index = count - 1;
    const elitePrice = PLANS_PRICE["elite"][index];
    const performancePrice = PLANS_PRICE["performance"][index];
    const starterPrice = PLANS_PRICE["starter"][index];

    if (count == 1) {
      $(counterMinusElem).prop('disabled', true);
    } else {
      $(counterMinusElem).prop('disabled', false);
    }

    if (count == 10) {
      $(counterPlusElem).prop('disabled', true);
    } else {
      $(counterPlusElem).prop('disabled', false);
    }
    counterDisplayText.text(count);
    elitePlanSelector.text("$" + elitePrice);
    performancePlanSelector.text("$" + performancePrice);
    starterPlanSelector.text("$" + starterPrice);
  }

  counterPlusElem.addEventListener("click", () => {
    counter.increment();
    updateDisplay();
  });

  counterMinusElem.addEventListener("click", () => {
    counter.decrement();
    updateDisplay();
  });

  updateDisplay();

  $(document).ready(function() {
    let planHeader = $(".plan-details-header");

    planHeader.on("click", function() {
      $(".plan-details-header")
        .next(".plan-details-body")
        .slideToggle("fast", "swing", function() {
          $(".plan-details-header")
            .parents(".plan-details-wrapper")
            .toggleClass("isOpen");
        });
    });
  });

})(jQuery.noConflict(), window, document);

.plans-main {
  padding: 32px 0;
  background: #f2f2f2;
  font-family: "attAleckSans-Regular";
}

.plans-main .counter-wrapper {
  width: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plans-main .counter-wrapper .counter-display {
  background: #fff;
  margin: auto 13px;
  border-radius: 8px;
  width: 48px;
  height: 35px;
  border: 1px solid #1d2329;
  color: #454b52;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.plans-main .counter-wrapper .bn-counter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: navy;
  color: #fff;
  font-size: 24px;
  border: 1px solid navy;
}

.plans-main .counter-wrapper .bn-counter:disabled {
  background: rgba(104, 110, 115, 0.50);
  border: 1px solid rgba(104, 110, 115, 0.50);
}

.plans-main .pricing-wrapper {
  min-height: 150px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.plans-main .pricing-wrapper .lines-title {
  text-align: center;
  color: #1d2329;
  margin-bottom: 18px;
  font-size: 18px;
}

.plans-main .pricing-wrapper .plans-scollable {
  overflow: auto;
  margin-top: 27px;
  margin-bottom: 30px;
}

.plans-main .pricing-wrapper .plans-wrapper {
  width: 1180px;
  display: flex;
  margin: auto;
  justify-content: space-around;
}

.plans-main .pricing-wrapper .plan-box {
  width: 374px;
  border-bottom: 7px solid #0057b8;
  background: white;
}

.plans-main .pricing-wrapper .plan-box .plan-header {
  font-family: "attAleckSans-Medium";
  height: 43px;
  font-weight: 600;
  font-size: 18px;
  align-items: center;
  display: flex;
  justify-content: center;
  background: orange;
  color: #1d2329;
}

.plans-main .pricing-wrapper .plan-box .price-section {
  padding: 25px 15px;
  background: navy;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: 211px;
}

.plans-main .pricing-wrapper .plan-box .price-section .price-info {
  display: flex;
  flex-direction: column;
}

.plans-main .pricing-wrapper .plan-box .price-section .plan-price {
  font: normal normal 900 60px/60px ATT Aleck Sans;
  font-family: "attAleckSans-Bold";
}

.plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper {
  display: flex;
  flex-direction: column;
}

.plans-main .pricing-wrapper .plan-box .price-section .brand-name {
  font-size: 16px;
}

.plans-main .pricing-wrapper .plan-box .price-section .plan-name {
  font-size: 20px;
  font-weight: 500;
}

.plans-main .pricing-wrapper .plan-box .price-section .plan-price-meta {
  padding: 0 15px;
}

.plans-main .pricing-wrapper .plan-box .price-section .plan-info {
  font-size: 14px;
  margin-bottom: 6px;
}

.plans-main .pricing-wrapper .plan-box .price-section .plan-tc {
  font-size: 9px;
  margin-top: 10px;
}

.plans-main .pricing-wrapper .plan-box .plan-meta {
  padding: 25px 15px;
  text-align: center;
  color: #454b52;
  font-size: 18px;
  background: rgba(220, 223, 227, 0.3);
}

.plans-main .pricing-wrapper .plan-box .plan-meta .desc {
  width: 80%;
  margin: auto;
  font-family: "attAleckSans-Regular";
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper {
  background: #fff;
  text-align: center;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-action {
  font-size: 14px;
  color: #0057b8;
  font-weight: 700;
  font-family: "attAleckSans-Medium";
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-action>.glyphicon {
  margin-left: 16px;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .isCollapsed {
  display: block;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .isExpanded {
  display: none;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-header {
  padding: 20px 25px;
  cursor: pointer;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body {
  display: none;
  width: 80%;
  margin: auto;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets {
  font-size: 16px;
  color: #454b52;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets .icon {
  margin-bottom: 5px;
  height: 20px;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets .text {
  font-family: "attAleckSans-Regular";
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets .icon img {
  max-height: 100%;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper.isOpen .isExpanded {
  display: block;
}

.plans-main .pricing-wrapper .plan-box .plan-details-wrapper.isOpen .isCollapsed {
  display: none;
}

@media screen and (max-width: 768px) {
  .plans-main .pricing-wrapper .plans-wrapper {
    width: 716px;
  }
  .plans-main .pricing-wrapper .plan-box {
    width: 228px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section {
    padding: 10px 15px;
    height: 145px;
    text-align: left;
    flex-wrap: wrap;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .price-info {
    width: 45%;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .price-info .plan-price {
    font-size: 40px;
    line-height: 1;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .price-info .plan-info {
    font-size: 12px;
    margin-top: 6px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper {
    width: 55%;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper .plan-name {
    font-size: 16px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper .plan-tc {
    margin-top: 5px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper>div {
    flex: 0 1 auto;
  }
  .plans-main .pricing-wrapper .plan-box .plan-meta {
    font-size: 16px;
    height: 125px;
  }
  .plans-main .pricing-wrapper .plan-box .plan-meta .desc {
    width: 100%;
  }
}

@media screen and (max-width: 414px) {
  .plans-main .pricing-wrapper {
    padding: 0;
  }
  .plans-main .pricing-wrapper .lines-title {
    padding: 0 20px;
  }
  .plans-main .pricing-wrapper .plans-wrapper {
    width: 854px;
  }
  .plans-main .pricing-wrapper .plan-box {
    width: 274px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section {
    text-align: center;
    height: 208px;
    flex-wrap: nowrap;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .price-info {
    margin-bottom: 6px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .plan-price {
    font-size: 60px !important;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper .brand-name {
    font-size: 18px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section .brand-wrapper .plan-name {
    font-size: 22px;
  }
  .plans-main .pricing-wrapper .plan-box .price-section>div {
    width: 100% !important;
  }
  .plans-main .pricing-wrapper .plan-box .plan-meta {
    font-size: 16px;
  }
  .plans-main .pricing-wrapper .plan-box .plan-meta .desc {
    width: 100%;
  }
  .plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body {
    width: 85%;
  }
  .plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets {
    flex-direction: row;
    justify-content: left;
    text-align: left;
  }
  .plans-main .pricing-wrapper .plan-box .plan-details-wrapper .plan-details-body .plan-bullets .icon {
    margin-right: 8px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="plans-main">

  <div class="pricing-wrapper">
    <div class="lines-title">Choose quantity</div>

    <div class="counter-wrapper">
      <button class="bn-counter counter-minus">-</button>
      <div class="counter-display"></div>
      <button class="bn-counter counter-plus">+</button>
    </div>

    <div class="plans-scollable">
      <div class="plans-wrapper">
        <div class="plan-box elite-plan">
          <div class="plan-header">Enterprise</div>
          <div class="price-section">
            <div class="price-info">
              <div class="plan-price">$85</div>
              <div class="plan-info">
                Quantity: <span class="lines_count"></span>
              </div>
            </div>
            <div class="brand-wrapper">
              <div class="brand-name">Best</div>
              <div class="plan-name"><sup></sup></div>
              <div class="plan-tc">
                &nbsp;
              </div>
            </div>
          </div>
          <div class="plan-meta">
            <div class="desc">Our plan that includes 4 of our most popular features.</div>
          </div>

          <div class="plan-details-wrapper">
            <div class="plan-details-header">
              <div class="plan-action isCollapsed">Expand for Features <span class="glyphicon glyphicon-menu-down"></span></div>
              <div class="plan-action isExpanded">Collapse <span class="glyphicon glyphicon-menu-up"></span></div>
            </div>
            <div class="plan-details-body">
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/fasttrack-icon.svg" /></div>
                <div class="text">Feature<sup>1</sup></div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/hotspot-black-icon.svg" /></div>
                <div class="text">Feature<sup>2</sup></div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/uhd-4k-icon.svg" /></div>
                <div class="text">Feature<sup>3</sup></div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/security-shield-icon.svg" /></div>
                <div class="text">Feature<sup>4</sup></div>
              </div>

            </div>
          </div>
        </div>

        <div class="plan-box performance-plan">
          <div class="plan-header">Business</div>
          <div class="price-section">
            <div class="price-info">
              <div class="plan-price ">$75</div>
              <div class="plan-info">
                Quantity: <span class="lines_count"></span>
              </div>
            </div>
            <div class="brand-wrapper">
              <div class="brand-name">Better</div>
              <div class="plan-name"><sup></sup></div>
              <div class="plan-tc">
              </div>
            </div>

          </div>
          <div class="plan-meta">
            <div class="desc">The optimal plan if you’re looking to support future growth.</div>
          </div>

          <div class="plan-details-wrapper">
            <div class="plan-details-header">
              <div class="plan-action isCollapsed">Expand for Features <span class="glyphicon glyphicon-menu-down"></span></div>
              <div class="plan-action isExpanded">Collapse <span class="glyphicon glyphicon-menu-up"></span></div>
            </div>
            <div class="plan-details-body">
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/hotspot-black-icon.svg" /></div>
                <div class="text">Feature<sup>2</sup></div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/hd-icon.svg" /></div>
                <div class="text">Feature<sup>5</sup></div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/security-shield-icon.svg" /></div>
                <div class="text">Feature<sup>4</sup></div>
              </div>

            </div>
          </div>
        </div>

        <div class="plan-box starter-plan">
          <div class="plan-header">Consumer</div>
          <div class="price-section">
            <div class="price-info">
              <div class="plan-price">$65</div>
              <div class="plan-info">
                Quantity: <span class="lines_count"></span>
              </div>
            </div>
            <div class="brand-wrapper">
              <div class="brand-name">Very Good</div>
              <div class="plan-name"><sup></sup></div>
              <div class="plan-tc">
              </div>
            </div>

          </div>
          <div class="plan-meta">
            <div class="desc">A simple plan that’s ideal for starting a small business</div>
          </div>

          <div class="plan-details-wrapper">
            <div class="plan-details-header">
              <div class="plan-action isCollapsed">Expand for Features <span class="glyphicon glyphicon-menu-down"></span></div>
              <div class="plan-action isExpanded">Collapse <span class="glyphicon glyphicon-menu-up"></span></div>
            </div>
            <div class="plan-details-body">
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/sd-icon.svg" /></div>
                <div class="text">Feature</div>
              </div>
              <div class="plan-bullets">
                <div class="icon"><img src="https://www.business.att.com/content/dam/attbusiness/small-business/images/icons/security-shield-icon.svg" /></div>
                <div class="text">Feature<sup>6</sup></div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Модернизация пользовательской карусели для включения навигационных точек

Ответы (0)