Flickity

Flickity.markdown

Flickity

A Pen by KrijnFK on CodePen.

License.

index.html

<div class="main-gallery">
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
</div>

script.js

jQuery('.main-gallery').flickity({
});

scripts

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>

style.css

.main-gallery {
	height: 400px;

	.gallery-cell {
		width: 100%;
		height: 400px;
		background: #82BAA9;
	}

	.flickity-prev-next-button {
		width: 30px;
		height: 30px;
		background: transparent;
		outline: none;

		.arrow {
			fill: white;
		}

		&.no-svg {
			color: white;
		}

		&:disabled {
			display: none;
		}
	}

	.flickity-page-dots {
		bottom: 15px;

		.dot {
			width: 10px;
			height: 10px;
			opacity: 1;
			background: transparent;
			border: 2px solid white;
			margin: 0 3px;
            
            &.is-selected {
                background: #fff;
            }
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.css" rel="stylesheet" />