scroll in x-axis with owl carousel

index.pug

#wrapper
	.list-wrapper
		ul.default-list.owl-carousel
			-for (i = 0; i < 20; i++)
				li.default-list-item
					.default-list-preview
						a(href="javascript:;")
							img(src="https://picsum.photos/200?random"+i+1, alt="")
					.default-list-content
						h3.default-list-title
							a(href="javascript:;") 名稱#{i+1}
			li.default-list-item

script.babel

;(function($) {
	const owlTarget = $('.default-list')
	
	owlTarget.owlCarousel({
		// items: 8,
		dots: false,
		nav: true,
		autoWidth: true,
		// stagePadding: 30,
		// loop: true,
		// freeDrag: true,
		responsive: {
			0: {
				margin: 20,
			},
			481: {
				margin: 30,
			},
			769: {
				margin: 40,
			},
		}
	})
})($)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

scroll-in-x-axis-with-owl-carousel.markdown

scroll in x-axis with owl carousel

A Pen by HanaHina on CodePen.

License.

style.stylus

*
*:after
*:before
	box-sizing border-box
body
	font-family 'Lato', 'Calibri', 'Arial', '微軟正黑體', sans-serif
	letter-spacing 0.05em
	line-height 1.5
a
button
	transition all .25s ease
a
	color inherit
	text-decoration none

// 
#wrapper
	background #f7f7f7
	margin 0 auto
	max-width 1200px
	min-height 100vh
	padding 0 10px
	width 100%
	@media(min-width 1025px)
		padding-left 15px
		padding-right @padding-left
// .list-wrapper
// 	position relative
// 	&:after
// 	&:before
// 		border-right 2px #a6abb1 solid
// 		border-top @border-right
// 		bottom 0
// 		content ''
// 		display none
// 		height 15px
// 		margin auto
// 		position absolute
// 		top 0
// 		width @height
// 	&:after
// 		right 15px
// 		transform rotate(45deg)
// 		.arrow-right&
// 			display block
// 			@media (min-width 1201px)
// 				display none
// 	&:before
// 		left 15px
// 		transform rotate(-135deg)
// 		.arrow-left&
// 			display block
// 			@media (min-width 1201px)
// 				display none
// 	&.arrow-left
// 		padding-left 40px
// 		@media (min-width 661px)
// 			padding-left 60px
// 		@media (min-width 1025px)
// 			padding-left 80px
// 		@media (min-width 1201px)
// 			padding-left 0
// 	&.arrow-right
// 		padding-right 40px
// 		@media (min-width 661px)
// 			padding-right 60px
// 		@media (min-width 1025px)
// 			padding-right 80px
// 		@media (min-width 1201px)
// 			padding-right 0
.default-list
	display flex
	list-style none
	margin 0
	overflow hidden
	padding 0
	@media(min-width 1201px)
		justify-content center
	&::-webkit-scrollbar
		height 0
		width @height
	&.owl-loaded
		display block
	a
	img
		display block
		margin 0 auto
		max-width 100%
		width auto
	&-item
		flex 0 0 $fb = 60px
		margin-left 20px
		max-width $fb
		width $fb
		@media(min-width 481px)
			margin-left 30px
		@media(min-width 661px)
			flex-basis $fb = 100px
			max-width $fb
			width $fb
		@media(min-width 769px)
			margin-left 40px
		&:first-child
			margin-left 0
	& > &-item
	.owl-item
		&:last-child
			// opacity 0
			// margin-right 0 !important
			pointer-events none
			// .default-list-item
			// 	width 0
	&-preview
		border-radius 50%
		overflow hidden
		> a
			&:hover
				transform scale(1.1)
	&-content
		line-height 1.5
		padding-top 10px
	&-title
		color #000
		font-size 14px
		text-align center
		@media (min-width 661px)
			font-size 16px
		> a
			overflow hidden
			text-overflow ellipsis
			white-space nowrap
		

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet" />