DW News Carousel Nav Icon

Hi,
I am trying to setup the DW News Carousel on my website but notice a strange nav icon after setting up.
The icon does not look like the way it appears on http://demo.designwall.com/#dw-focus
I have jetpack running on my site but i dont know if that was the problem.
Any idea on how to fix this?
Thank you in advance

2 Answers

DominicStaff
answered 9 years ago

Please send me your site for further checking.

DominicStaff
answered 9 years ago

Hi,
I have checked your site, this issue is due you have put the DW Carousel in the Home Content section in the Widget section. Currently, DW Carousel widget just support to display on the Bottom section. However, if you want resolve this issue, you can add the following code to the style.css file:

.carousel {
padding: 30px 0;
}
.carousel .carousel-inner {
border-bottom: 1px solid #ddd;
}
.carousel .carousel-control {
z-index: 1;
top: auto;
bottom: -2px;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
font-size: 8px;
line-height: 22px;
color: #111;
background: transparent;
opacity: 1;
filter: alpha(opacity=100)
}
.carousel .carousel-control:hover {
border-color: #111;
}
.carousel .carousel-control.right {
left: auto;
right: 0;
}
.carousel .carousel-nav {
bottom: 5px;
margin: 0 auto;
position: absolute;
width: 100%
}
.carousel .carousel-nav ul {
margin: 0 0 -2px;
list-style: none;
text-align: center;
}
.carousel .carousel-nav li {
display: inline-block;
width: 12px;
height: 12px;
padding: 3px;
border: 1px solid #ccc;
border-radius: 20px;
line-height: 2px;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.chrome .carousel .carousel-nav li, .safari .carousel .carousel-nav li {
padding-top: 1px;
}
.ie8 .carousel .carousel-nav li {
margin: 2px;
}
.carousel .carousel-nav li a {
display: inline-block;
text-indent: -9999px;
width: 4px;
height: 4px;
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -2px 0 0 -2px;
}
.carousel .carousel-nav li:hover a {
background: #aaa;
cursor: pointer;
}
.carousel .carousel-nav li.active a {
background: #111;
}
.carousel .hentry {
padding-bottom: 30px;
}
.carousel .hentry:before {
content: ”;
position: absolute;
width: 1px;
height: 100%;
background: #ddd;
margin-left: -20px;
}
.carousel .hentry:first-child:before {
display: none;
}
.carousel .hentry .entry-thumbnail {
position: relative;
}
.carousel .hentry .entry-title {
text-align: center;
}
.carousel .hentry .entry-title a {
display: block;
}
.carousel .hentry .entry-meta {
text-align: center;
font-size: 11px;
}

If you still face there issue, you can send me username & password of your site for further checking.
Hope this helps !