FlexSlider Стрелки работают, но не видны - PullRequest
Новая
       110

FlexSlider Стрелки работают, но не видны

0 голосов
/ 27 сентября 2019

Я попытался последовать совету по этому вопросу в других чатах, но безуспешно.Я использую Unbounce и скопировал все коды с одной старой целевой страницы на новую.Все работает, кроме стрелок, которые не видны (но они кликабельны, они работают).

Все, что мне пока удалось сделать, это удалить рамку вокруг стрелок.

Любая идея, что может бытьне так?

Ссылка на новый LP

Ссылка на старый LP с работающим Flexslider 

<style>
a {
  text-decoration: none !important;
}
 
/*Testimonials slider*/
.testimonial-container {
  background-color: transparent;
  width: 100%;
}

.cd-testimonials-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background-color: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 25px 0px 40px 0;
	z-index: 1;
}

.testimonial-content {
	max-width: 1000px;
	width: 80%;
	margin: 0 auto 30px auto;
}

.cd-testimonials {
	color: rgba(130, 132, 139, 1);
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cd-testimonials > li {
	position: absolute;
	opacity: 0;
  	font-family: 'Fira Sans', sans-serif;
}

.cd-testimonials > li:first-child {
	position: relative;
	opacity: 1;
}

.testimonial-content p {
	font-style: italic;
	line-height: 1.4;
	margin-bottom: 30px;
	padding: 0 14px;
  	font-size: 19px;
  	color: #284A6A;
}

.cd-author .cd-author-info {
	display: inline-block;
	vertical-align: top;
  	color: #0058A9;
  	font-size: 16px;
  	font-weight: 500;
 	text-align: center;
	line-height: 1
}

ul.cd-author-info {
	list-style: none;
  
}

ul.cd-author-info li span {
	font-size: 14px;
	line-height: 32px;
	font-style: italic;
	font-weight: 300;
  	color: #9c9c9c;
}

.flex-direction-nav a {
	text-decoration: none;
	display: block;
	width: 50px;
	height: 100%;
	margin: 0px 0 0;
	position: absolute;
	z-index: 9999;
	top: 0;
	opacity: 1;
	background: transparent;
	cursor: default;
	color: transparent;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.flex-direction-nav a:before {
	font-size: 52px;
	font-family: Arial;
   	content: "\f053";
	position: absolute;
	display: block;
	top: 50%;
  	cursor: pointer;
  	color: transparent;
	padding: 14px 10px 14px 10px;
  
}

.flex-direction-nav a.flex-next:before {
	content: "\f054";
	padding: 14px 20px 14px 10px;
}

.flex-direction-nav .flex-prev {
	left: 0px;
}

.flex-direction-nav .flex-next {
	right: 0px;
	text-align: right;
}

.flexslider:hover .flex-direction-nav .flex-prev {
	opacity: 1;
	left: 0px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
	opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next {
	opacity: 1;
	right: 0px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
	opacity: 1;
}

.flex-direction-nav .flex-disabled {
	opacity: 0!important;
	filter: alpha(opacity=0);
	cursor: default;
}

.flex-control-paging li a {
	width: 6px;
	height: 6px;
	display: block;
	background: #666;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	text-indent: -9999px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.flex-control-paging li a:hover {
	background: #333;
	background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
	background: #000;
	background: rgba(2, 23, 31, 1);
	cursor: default;
}

.flex-control-nav {
	bottom: 30px;
	position: absolute;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 100%;
}

.flex-control-nav li {
	display: inline-block;
	padding: 0px 5px 0px 5px;
}
    
/*Footer icons custom style*/
.footer-icons {
    text-align: left;
  }
.footer-icons a {
    margin-right: 10px;
    color: #fff;
}

@media screen and (max-width: 767px) {
  	.cd-author .cd-author-info {
		line-height: 1.4;
	}
	.cd-author .cd-author-info {
		font-size: 16px;
	}
  	.testimonial-content p {
		font-size: 16px;
	}
	.flex-direction-nav a {
		width: 30px;
	}
	.flex-direction-nav a:before {
		font-size: 30px;
	}
	.flex-direction-nav a:before {
		padding: 14px 0px 10px 0px;
	}
	.flex-direction-nav .flex-prev {
		left: 0px;
	}
	.flex-direction-nav .flex-next {
		right: 0px;
		text-align: right;
	}
	.flexslider:hover .flex-direction-nav .flex-prev {
		opacity: 1;
		left: 0px;
	}
	.flexslider:hover .flex-direction-nav .flex-prev:hover {
		opacity: 1;
	}
	.flexslider:hover .flex-direction-nav .flex-next {
		opacity: 1;
		right: 0px;
	}
} 
</style>

1 Ответ

0 голосов
/ 27 сентября 2019

Вы теряете Font Awesome css, который требуется в качестве стрелки навигации.

добавьте 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

в <head> раздел.(Как и на рабочей странице, проверьте строку исходного кода 2825).Удачи.

...