큰 카르텔 - 첫 번째 슬라이드 쇼 질문

Question

내 사이트로 연결되는 링크 : http://johnathonpowers.bigcartel.com/

내가 슬라이드 쇼와 함께 놀아 및 사용자 정의 페이지를 홈 페이지에서 마이그레이션 할 수 있었다되었다. 처음에는 테스트 페이지에 있었지만 푸터 문제가 원인이라고 생각했습니다 (바닥 글에 너무 많은 항목이있을 수 있음) 일시적으로 내 정보 페이지에 있습니다.

{% if theme.image_sets.slideshow.size > 0 %} 
<div class="flexslider"> 
<ul class="slides"> 
    {% for image in theme.image_sets.slideshow %} 
    <li><img src="{{ image.url }}"></li> 
    {% endfor %} 
</ul> 
</div> 
{% endif %} 

...

내 홈 페이지에서 내 페이지에 대한 내에 :

그래서 난이 움직였다. 그렇게하면 화살표가 더 이상 보이지 않게됩니다. 나는 항상 그들을 보이게하기로되어있는 약간의 코드를 시도했지만, 여전히 운이 없다.

이것이 내가 CSS 페이지의 끝에 추가 한 것입니다. 그래도 도움이되지 않았다.

.flex-direction-nav li a { 
opacity: 1; 
} 

또한 내 제품 페이지에이 슬라이드 쇼를 넣을 수 있습니까? 또는 사이트 전체에 여러 개의 슬라이드 쇼를 만들 수 있습니까?

제가 상당히 익숙해지고 있다는 것을 알고 있지만 제 궁극적 인 목표는 제품 이미지의 "목록"을 대체하는 제품 이미지 슬라이드 쇼를 만드는 것이 었습니다. 제품 이미지를 추가하면 제품 페이지의 오른쪽에 하나의 열이 표시되고 종류가 다른 슬라이드 쇼가 더 멋지게 보일 수 있습니다.

다음은 예제 페이지입니다 (이미지가 차례로 어떻게 나타나는지보십시오). 두 개 이상의 링크를 게시 할 수 없습니다. 프레임이 아닌 "불면 벽돌"을보십시오.

나는 실제로 이미지를 가지고있는 방법을 알아 내려고 노력했다. 옷을 입은 웹 사이트 나 다른 것과 같은 작은 이미지를 클릭하면 이미지를 바꿀 수있다. 확대/축소 기능은 jquery라는 항목을 추가하는 것에 대해 읽은 내용이기도합니다.

궁극적으로 나는 (아래 작은 이미지로 큰 이미지를) 내 제품 페이지에서이 작업을 수행하고 싶습니다 : http://www.elevateweb.co.uk/image-zoom

죄송이 게시물은 사방에 갔다. 제품 이미지 및 슬라이드 쇼 솔루션을 찾는 데 도움을 주셔서 감사합니다.

Answer 1

당신은 추가하여 사용자 정의 페이지에 표시하는 화살표를 강제 할 수있는 사용자 정의하려면 다음은 디자인> 고급> CSS는, 하단에 :

#page_body .flex-direction-nav a { 
    display: block; 
} 

그리고 루나 테마 슬라이드 쇼 코드 Flexslider를 사용하여, 당신은 shouldn 귀하의 상점에있는 제품 페이지 또는 다른 내장 페이지에이를 추가하는 데 문제가 없습니다. Flexslider는 여러 개의 슬라이드 쇼도 지원하므로 자세한 내용은 https://github.com/woothemes/FlexSlider에서 설명서를 참조하십시오.

이미지 줌 스크립트에 관해서는, 나는 여기에 질문에 대답했습니다 : https://stackoverflow.com/a/22665701/2445073