Nano Hash - криптовалюты, майнинг, программирование

Центрировать несколько гладких слайдов без отключения анимации

Итак, для наглядности того, что я пытаюсь объяснить, у меня есть пример Codepen или тот же пример. код приведен ниже. Но, по сути, мне было интересно, есть ли параметр в Slick.js, который я просмотрел, или элегантный хак jQuery, который позволил бы мне выполнить следующее:

  1. Поля по обе стороны от видимых (также известных как активные) слайдов

  2. Оперативное определение количества видимых слайдов в зависимости от размера экрана

Следующий фрагмент достаточно полный, чтобы дать полное представление о том, к чему я стремлюсь, и о среде, в которой находится код. Я тщательно просмотрел, но, по-видимому, у меня есть ползунки, которые просто обрезают ваш контент, как какой-то странный волшебный ящик, не беспокоит много людей, которых я мог найти.

Короче говоря, я ищу чистый способ, чтобы ползунок выглядел как пример 1, пока он статичен, но во время перехода он продолжает скользить полностью за пределы страницы, а не просто скрывается крошечным маленьким родительским элементом.

В настоящее время я работаю над хаком, чтобы исправить пример 2, чтобы сделать именно это, однако для этого требуется то, что я считаю беспорядочной практикой.

$("#slickA").slick({
  slidesToShow: 1
});
$("#slick1").slick({
  slidesToShow: 2
});
$("#slick2").slick({
  slidesToShow: 2
});
.slick-prev,
.slick-next,
.slick-prev:before,
.slick-next:before,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:hover:before,
.slick-next:hover:before {
  color: inherit;
  z-index: 10;
}
.stripe > ul .slick-prev {
  left: 20px;
}
.stripe > ul .slick-next {
  right: 20px;
}
.stripe > .container > p,
.stripe > .container > ul {
  text-align: left;
  padding: 35px;
  margin: 0;
}
.stripe > .container > hr {
  margin: 50px 0;
}
ul.slider {
  padding: 0;
  margin: 0;
}
.slider li {
  list-style: none;
}
.image {
  background: black;
  position: relative;
  width: 100%;
  padding: 0 0 100% 0;
}
#nav-spacer {
  display: block;
  height: 50px;
}
.stripe {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.default {
  color: White;
  background: DarkCyan;
}
.inverse {
  color: DarkCyan;
  background: White;
}
.grey {
  color: White;
  background: DimGrey;
}
.grey-light {
  color: DimGrey;
  background: White;
}
.color {
  color: DarkOrange;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
  <div class="container">

    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.
        <br>All you get is this text and a mostly barebones HTML document.</p>
    </div>

  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <h2>Slick Example Precursor</h2>
  </div>
  <ul id="slickA" class="slider">
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>

  </ul>
  <div class="container">
    <p>
      This is what I would like to see with 2 slides visible at a time with large screens maybe even 3 but on mobile only display 1 slide at a time while maintaining margins.
    </p>
  </div>
</div>
<div class="stripe default">
  <div class="container">
    <h2>Slick Example 1</h2>
    <ul id="slick1" class="slider">
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>


    </ul>
    <p>
      Sure this works but it is hardly visually acceptable as it cuts off the slide the second it hits the edge of the container. But on the upside it only shows 2 slides and has nice margins.
    </p>
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <h2>Slick Example 2</h2>
  </div>
  <ul id="slick2" class="slider">
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>

    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>

  </ul>
  <div class="container">
    <p>
      This feels closer but I don't want any static content outside the margins.
    </p>
  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>

<div class="stripe grey">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
    </p>
  </div>
</div>
<div class="stripe default">
  <div class="container">
    <p>
      Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
      innovation via workplace diversity and empowerment.
    </p>
  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>
<div class="stripe grey">
  <div class="container">
    <p>
      Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
      in real-time will have multiple touchpoints for offshoring.
    </p>
    <ul>
      <li>
        Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
        on the bottom line.
      </li>
      <li>
        Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
        derive convergence on cross-platform integration.
      </li>
      <li>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
      </li>

    </ul>
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
    </div>

    <hr>
  </div>
</div>

slider carousel jquery css slick.js
18.05.2016

Ответы:


1

Вот тот хак, который я придумал... Он определенно не идеален. Я был бы рад любой помощи, чтобы оптимизировать или заменить его лучшим решением.

Это основной javascript, который заставляет его работать:

$slides.each(function(index) {
    var col_width = Math.floor(12 / number_of_slides_per_view);

    var $this = $(this);
    if (index + 1 > (total_number_of_slides - slides_to_skip)) {
        $this.remove();
    } else {
        $this.addClass('col-xs-' + col_width);
        $row.append($this);

        if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
            $container.append($row);
            $li.append($container);
            $slick_slider.append($li);
            $li = $('<li></li>');
            $container = $('<div></div>').addClass('container');
            $row = $('<div></div>').addClass('row');
        }
    }
});

$slick_slider.slick({
    slidesToShow: 1
});

Это действительно работает, но у такого метода есть серьезные недостатки. Это не обеспечивает приемлемого отката для пользователей, у которых отключен JavaScript. Если размер окна по какой-либо причине изменяется, страницу необходимо полностью обновить, прежде чем она снова станет визуально приемлемой. Это легко продемонстрировать, запустив встроенный скрипт в этом ответе и нажав на полноэкранный режим... он должен показывать 4 слайда за раз, но поскольку все, что происходит, это расширение контейнера, код не запускается повторно и не может без какого-либо способа отменить то, что он сделал в первый раз.

var $slick_slider = $("#slickA");

var $li = $('<li></li>');

var $container = $('<div></div>').addClass('container');

var $row = $('<div></div>').addClass('row');

var width = $(window).width();

var $slides = $(".my-slide");

var total_number_of_slides = $slides.length;

var number_of_slides_per_view = 1;

if (width >= 1200) {
	number_of_slides_per_view = 4;
}
if (width >= 992 && width < 1200) {
	number_of_slides_per_view = 3;
}
if (width >= 768 && width < 992) {
	number_of_slides_per_view = 2;
}
if (width >= 0 && width < 768) {
	number_of_slides_per_view = 1;
}

var slides_to_skip = total_number_of_slides % number_of_slides_per_view;

$slides.each(function(index) {
	var col_width = Math.floor(12 / number_of_slides_per_view);

	var $this = $(this);
	if (index + 1 > (total_number_of_slides - slides_to_skip)) {
		$this.remove();
	} else {
		$this.addClass('col-xs-' + col_width);
		$row.append($this);

		if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
			$container.append($row);
			$li.append($container);
			$slick_slider.append($li);
			$li = $('<li></li>');
			$container = $('<div></div>').addClass('container');
			$row = $('<div></div>').addClass('row');
		}
	}
});

$slick_slider.slick({
	slidesToShow: 1
});
.slick-prev, 
.slick-next,
.slick-prev:before, 
.slick-next:before,
.slick-prev:hover, 
.slick-next:hover,
.slick-prev:hover:before, 
.slick-next:hover:before 
{
	color: inherit;
	z-index: 10;
}
.stripe > ul .slick-prev
{
	left: 20px;
}
.stripe > ul .slick-next
{
	right: 20px;
}


.stripe > .container > p,
.stripe > .container > ul
{
	text-align: left ;
	padding: 35px;
	margin: 0;
}
.stripe > .container > hr
{
	margin: 50px 0;
}
ul.slider
{
	padding: 0;
	margin: 0;
}
.slider li
{
	list-style: none;
}
.image
{
	background: black;
	position: relative;
	width: 100%;
	padding: 0 0 100% 0;
}







#nav-spacer
{
	display: block;
	height: 50px;
}
.stripe
{
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.default
{
  color: White;
  background: DarkCyan;
}


.inverse
{
  color: DarkCyan;
  background: White;
}


.grey
{
  color: White;
  background: DimGrey;
}

.grey-light
{
  color: DimGrey;
  background: White;
}
.color
{
  color: DarkOrange;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
			<a class="navbar-brand" href="#">Project name</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</div>
	</div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
	<div class="container">

		<div class="starter-template">
			<h1>Bootstrap starter template</h1>
			<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
		</div>

	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>
<div class="stripe inverse">
	<div class="container">
		<h2>Slick Responsive Hack Example</h2>
	</div>
	<ul id="slickA" class="slider">
				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>
				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>

	</ul>
	<div class="container">
		<p>
			This works but isn't optimal as it takes extra processing on the client side before it is viewable and if the window is resized for some reason then the page will need to be reloaded for it to be visually corrected again.
		</p>
	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>

<div class="stripe grey">
	<div class="container">
		<h1>Hello, world!</h1>
		<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
		<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
	</div>
</div>
<div class="stripe default">
	<div class="container">
		<p>
			Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
			innovation via workplace diversity and empowerment.
		</p>
	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>
<div class="stripe grey">
	<div class="container">
		<p>
			Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
			in real-time will have multiple touchpoints for offshoring.
		</p>
		<ul>
			<li>
				Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
				on the bottom line.
			</li>
			<li>
				Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
				derive convergence on cross-platform integration.
			</li>
			<li>
				Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
			</li>

		</ul>
	</div>
</div>
<div class="stripe inverse">
	<div class="container">
		<!-- Example row of columns -->
		<div class="row">
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
		</div>

		<hr>
	</div>
</div>

24.05.2016

2

Это больше возможностей css, меньше javascript, но все же временами это довольно глючит, и должен быть способ оптимизировать визуальную производительность, но это для меня загадка. Я просто оставлю это здесь на случай, если у кого-то появится способ улучшить его, или если кто-то посчитает, что это достаточно хорошо для его нужд, тогда он сможет его использовать.

Я попытался заставить код работать здесь во фрагменте кода, но не могу понять, что с ним не так... В любом случае, это работает на Codepen как минимум.

Ключевые CSS в реализации:

.slick-slide
{
 display: flex;
 justify-content: center;
 align-items: center;
 transition: margin 0.8s;
 margin: 0;
} 

.slick-slide.slick-current
{
 margin-left: 21vw;
}
@media (min-width: 1201px) {
  .slick-slide
  {
   width: calc( 60vw / 4 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 1200px) {
  .slick-slide
  {
   width: calc( 60vw / 3 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 950px) {
  .slick-slide
  {
   width: calc( 60vw / 2 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 760px) {
  .slick-slide
  {
   width: calc( 60vw )
  }
  .slick-slide.slick-current
  {
   margin-right: 21vw;
  }
 }
17.06.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..