Skip to content

Commit 81bef11

Browse files
author
Vivek Vishal
authored
Merge pull request #6379 from Jeffrin2005/image-scroll
Fix : Enhance Image Viewer Usability with Standard Navigation
2 parents 8882947 + 5818ce0 commit 81bef11

1 file changed

Lines changed: 88 additions & 75 deletions

File tree

  • src/sections/Meshery/Meshery-integrations/Individual-Integrations

‎src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js‎

Lines changed: 88 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -37,81 +37,99 @@ const HowIntegrationWorksWrapper = styled.section`
3737
.integration-section-row {
3838
margin: 4rem 0;
3939
align-items: center;
40+
flex-direction: column;
4041
}
4142
h2, h4 {
4243
color: black;
4344
}
4445
.integration-section-data {
46+
width: 100%;
47+
margin-bottom: 2rem;
4548
h1, h3, p {
46-
text-align: start; color: ${props => props.theme.primaryColor};
49+
text-align: center;
50+
color: ${props => props.theme.primaryColor};
4751
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
4852
}
4953
}
5054
5155
.integration-section-caraousel {
56+
width: 100%;
5257
.slick-slider {
58+
position: relative;
59+
width: 100%;
60+
5361
.slick-list {
54-
max-width: 50rem;
62+
width: 100%;
63+
margin: 0 auto;
64+
overflow: hidden;
5565
5666
.slick-slide {
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
5771
img {
72+
max-width: 100%;
73+
height: auto;
5874
max-height: 20rem;
75+
object-fit: contain;
5976
margin: auto;
6077
}
6178
}
6279
}
6380
64-
.slick-arrow{
65-
display: none !important;
81+
.slick-arrow {
82+
display: block !important;
83+
z-index: 1;
84+
width: 40px;
85+
height: 40px;
86+
background: transparent !important;
87+
border: none !important;
88+
box-shadow: none !important;
89+
&:before {
90+
color: ${props => props.theme.secondaryColor};
91+
font-size: 2rem;
92+
opacity: 1;
93+
}
94+
&.slick-prev {
95+
left: -50px;
96+
}
97+
&.slick-next {
98+
right: -50px;
99+
}
66100
}
67101
68102
.slick-dots {
69-
bottom: 0;
70-
top: 0;
71-
left: 52rem;
72-
width: 8rem;
73-
103+
bottom: -2rem;
104+
width: 100%;
105+
display: flex !important;
106+
justify-content: center;
107+
74108
li {
75-
display: block;
76-
width: 100%;
77-
height: auto;
78-
margin: 1rem auto;
79-
opacity: 0.6;
80-
81-
a {
82-
display: block;
83-
84-
img {
85-
height: 5rem;
86-
vertical-align: middle;
87-
object-fit: contain;
109+
display: inline-block;
110+
width: 10px;
111+
height: 10px;
112+
margin: 0 5px;
113+
114+
button {
115+
width: 10px;
116+
height: 10px;
117+
padding: 0;
118+
border-radius: 50%;
119+
background: ${props => props.theme.primaryColor};
120+
opacity: 0.5;
121+
border: none;
122+
123+
&:before {
124+
display: none;
88125
}
89126
}
127+
128+
&.slick-active button {
129+
opacity: 1;
130+
}
90131
}
91132
}
92-
.slick-dots
93-
li.slick-active {
94-
opacity: 1;
95-
}
96-
}
97-
}
98-
}
99-
}
100-
101-
@media screen and (max-width: 1600px) {
102-
.integration-section .integration-section-caraousel .slick-slider {
103-
.slick-list {
104-
max-width: 38rem;
105-
}
106-
107-
.slick-dots {
108-
left: 40rem;
109-
width: 6rem;
110-
111-
li a img {
112-
height: 4rem;
113-
object-fit: contain;
114-
}
115133
}
116134
}
117135
}
@@ -131,12 +149,16 @@ const HowIntegrationWorksWrapper = styled.section`
131149
132150
.integration-section-caraousel .slick-slider {
133151
.slick-list {
134-
max-width: 80%;
152+
width: 100%;
135153
margin: 2rem auto;
136154
}
137-
138-
.slick-dots {
139-
left: 92%;
155+
.slick-arrow {
156+
&.slick-prev {
157+
left: -30px;
158+
}
159+
&.slick-next {
160+
right: -30px;
161+
}
140162
}
141163
}
142164
}
@@ -158,16 +180,15 @@ const HowIntegrationWorksWrapper = styled.section`
158180
159181
.integration-section-caraousel .slick-slider {
160182
.slick-list {
161-
max-width: 85%;
162-
margin: 2rem 0;
183+
width: 100%;
184+
margin: 2rem auto;
163185
}
164-
.slick-dots {
165-
left: 90%;
166-
width: 4rem;
167-
168-
li a img {
169-
height: 2.5rem;
170-
object-fit: contain;
186+
.slick-arrow {
187+
&.slick-prev {
188+
left: -20px;
189+
}
190+
&.slick-next {
191+
right: -20px;
171192
}
172193
}
173194
}
@@ -187,10 +208,6 @@ const HowIntegrationWorksWrapper = styled.section`
187208
}
188209
}
189210
}
190-
.slick-dots {
191-
left: 85%;
192-
top: -1rem;
193-
}
194211
}
195212
}
196213
}
@@ -200,20 +217,16 @@ const HowIntegrationWorksWrapper = styled.section`
200217
const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) => {
201218

202219
const settings = {
203-
customPaging: (i) => {
204-
return (
205-
<a>
206-
<img src={slides[i].publicURL} alt={`Slide ${i}`} />
207-
</a>
208-
);
209-
},
210-
infinite: false,
211-
speed: 400,
220+
dots: true,
221+
infinite: true,
222+
speed: 500,
212223
slidesToShow: 1,
213224
slidesToScroll: 1,
214-
dots: true,
215-
vertical: true,
216-
verticalSwiping: true
225+
arrows: true,
226+
autoplay: true,
227+
autoplaySpeed: 4000,
228+
pauseOnHover: true,
229+
adaptiveHeight: true
217230
};
218231

219232
return (
@@ -229,7 +242,7 @@ const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) =>
229242
<Col $xs={12} $xl={4} className="integration-section-data">
230243
<h3>{howitworks != null ? howitworks : "Docker with Meshery" }</h3>
231244
<p>
232-
{howitworksdetails != null ? howitworksdetails : "The Docker Extension for Meshery extends Docker Desktop’s position as the cloud native developer’s go-to Kubernetes environment with easy access to the next layer of cloud native infrastructure: service meshes."}
245+
{howitworksdetails != null ? howitworksdetails : "The Docker Extension for Meshery extends Docker Desktop's position as the cloud native developer's go-to Kubernetes environment with easy access to the next layer of cloud native infrastructure: service meshes."}
233246
</p>
234247
</Col>
235248
<Col $xs={12} $xl={8} className="integration-section-caraousel">

0 commit comments

Comments
 (0)